{"_id":"@material/mwc-top-app-bar-fixed","_rev":"713-05cffaf814bcdc79e681db3806b04e27","name":"@material/mwc-top-app-bar-fixed","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.7.0":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.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/mwc-top-app-bar":"^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-fixed@0.7.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.14.1/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-YSKUgVI5EGmWMlWizrqBWxDtb5jDfemLf8b0wUSDw2+1Cm5BTAUWdBF49NoVN1/e1+G8ig04F2AAXxErMoOR7Q==","shasum":"ce35ad4e835ce9debcbcdb060948b41661de3c63","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.7.0.tgz","fileCount":11,"unpackedSize":29512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZ9rCRA9TVsSAnZWagAAz5gP/i4yp3kG+QvdRTeO9bAc\nVlX1FKeqxf6OaLl0ixxOSUSxzFDz4VV8i+9Vm6bfRPlaA99RGuSYjzJMmHp1\n/FB+RTf1gGIAVtlUOliFlTxGhei7ibsthkTMmey7/FZL8AlO21xPyf8tPf95\nObWeNWYIqqo+VSotrfXdc7QXEnBlAmm+TKdPMIPubQt0t6Ivf2EhdpWMfcjy\nU1ebniTo7zXoQOiU+nVzAzas6k4CEeLqplnCbkOMWlf1WqiiHtooZ3YBwQ18\nOtaKF2Yv2DwOI0J0ujrFBp4T4549p4mFWx1OoTxORKLmbdVyfAiWR2yJt1td\n8asIW5kDi8RyfXFP3KIAwRVsEMeEJf4zW5lPFnNxPm+d6DaoycXfESWSJeVy\nV/zGDTW5PelE2hgZk+gqeK/a02Z2tVUWdR/dcsdeZw4GGCdFQUcS1PBW/9TW\n6NxOjtu3kyhO8RibUNmVzvelc4eEqyZPsrG5qQCg5FAJBMPFMbRzHrIRuMAw\n6ZbJ29RtQOitZTAwBYrn9vAvqMsQWfp37vPO5FVv/IwoM5fNQc0SsD4JRwEq\njEd5PohoUEzDRdF0QJJfrIZeAKnAePkcb1yY2rbi5jbftB38u5+xpt9LdRFo\n3wVK1lQE888vh6XZYsjtdUvJ/hK1Fmq/ntde5QzAXpygG2kIpNTL/8mkcQEE\nOue4\r\n=edRw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFsBwojQbAipyzelE4oTNbJ/6q0VDBdUvNWBx+ZUPJgQIgQCj4YeCkjhk/TCQCJR/ln6ezwCFZnwQjbLu4bFuh8U4="}]},"maintainers":[{"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":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.7.0_1566941035136_0.21506122643184455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.1":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"^0.7.1","@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-fixed@0.7.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-7CB8en8mjc0qrYkWN3rQV/b5LoGgHjl7scDs98eDcsnqmVJfY6Hi20SUiF/AAtuHv2/LYxD6EYL4u9BB6C6yeA==","shasum":"728c5ad36ed08f93285b09bf79bb986a62a53b59","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.7.1.tgz","fileCount":11,"unpackedSize":29552,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZeznCRA9TVsSAnZWagAAKZ0P/212pbCMcxYRBja7ecBj\nrsC7c+Yh9mC6EO21xA+9+vzNbIIub142ojx49bkekleo9XF5J/3oR2mRiQvR\n7JleJE3xSO5oQOu0K7HQ8ehxC0rvWIvzqLFRs3zwbZdEdQrO69DZxVpaqpMd\nXzv5amMTS4Jxcygw1dbpFRfdAy6R4NP5A3cPZEyOFvr/+nljmClHPTDXc2K3\ntowDHE7af+LDpbqXa+Yea0itPVqfY6wJCbIy6CFciFifOATKHkRZIiyvLtUq\nf6V11CMrvXvroPva4926HqTqd5pXyg0WXbN9klG5f9wYK5n/GDUXG+xSLCW+\nQFNrjbAKukq06Ygt5ZuGAX3LKP+/pARXGr4+mni5AIHXxlAWwnslJ8E2Y+M2\nimPSmDNo7d6GdJMiXkZCJ61WrD7Uger9yTpVsIC4p/bJV6N+qbJIgnfTvxS1\nGMyg4gyFOVLKAcbicDrXWYK5XFM1M+7UyXb2SnnI2x482Xx7yqvzbtTR5CFW\nCuspqTAHa8A8SWQWnnFs2tJS/cej4KNgEhN9wd8IvawkwJjTsT17oS0YvsxW\nYOTK8lbqDz3Nt8Ii15ADMQ4toqMTOqqRAZDHO0Ydm+JnmhKTd/fLaLtztt7i\nStKHaC0sHGxKmtSXoo6z15g6BFmkFEg1ldbMNXLajvMH4THi7oK8xCBrD08r\ndjl8\r\n=5i3P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/k0jOnR17bT88vtdripUvhrIGVRO/t3yZDyt7XIsGhgIgPCI3hz3U9HgVUt93TQ4Okoi4RwQePZGW8dEQE10WVCc="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"emarquez","email":"emarquez@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.7.1_1566960871182_0.11174796950442323"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.8.0":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"^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-fixed@0.8.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.16.4/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-OeaBcnYBLqkMVtAPh1++Hqr7a+vEsyis8mE63qE6ls9NWpOK9PJfOZuquTfUTpNf9BuFQZSoiUzRHYShxbMMIw==","shasum":"0fa4b54a863fc0a9f323acc81efd30ee1231bcb7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.8.0.tgz","fileCount":14,"unpackedSize":33871,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbv+pCRA9TVsSAnZWagAAlH4P/1EWhC9YVipWmU1sBQ2L\nMcr+lwrmtaabRzSymj81FdjIRCwFenf82locTZL9XtYWijENAsxdQHnySo0g\nnzkMwWWrmpvPt+OCR3/lgyyJMxSp/Eb+mZBYw6wly4B+5mSqMG/nJjZcnkmC\ngw1YINWwhWasdByDSQzVCzkmrAGeM7w3X8cvtfCuqEC4cOX2oO89FHCH0lZ+\ntapr63XSaCbJDmISGwYcB5ZND1J21g4J6GR0PAgfwB3Apl/OncKT/ek3e8ez\nAVW3g39Ke9vKoOMNckKGHTZKDLf7e3IzGNgPsDPHSBoy5lI0qfZys45N5azz\n18lhuYig2yQI1NqlwS2Zc/BeGNnuICZzPvn0OnvAjAf2URr/IblDwK5bvLcg\n4sUxeKCUspY6VLwR0oQoFIGAuGMCUv7EsZECrYKU9ZgnEmbY0EcVejfspa5Z\nUCEtgfxl+4zOOzt6fddzGhHG4MLy6W0pXMBuurVyTXvz2Ex08sAS5QROR6VU\nqKI1dfUDrLUqn0CVnSw+sCmTqmgspgNwX4YgGm4dA73AGXRfTP8+/0XEYZwt\nhPnfd9VQaHiwwn4YlXSNMdY69TwZCMx6DfT0m2sj6Ss3tA4otkQPdMHWCys0\niymTWVkPgWYs2xr9c5O2H+2E9LqAYecMS2xMy57zmYANMvLBzPshAitkByrD\niGtL\r\n=963/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnpJa5HtM76T7v+LjmCGvja+/aKR5UCzruj7eL6z4VKAIhAP6GLVKKPV86feLtKdGAdu+M7ndggqioF/IgP1L1qD+v"}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"_npmUser":{"name":"aomarks","email":"aomarks@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.8.0_1567555495499_0.009789174716326565"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.0":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"^0.9.0","@material/top-app-bar":"^3.0.0","lit-element":"^2.2.1","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-fixed@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-QGqH20ReiIJ5qiTJF3HGyiemlsrug2ddyvLPHLbO3mHpkIHh1cA/QmyXrqHab+vzMvgaLtfqSe6KeX7LIgVsww==","shasum":"9ddc99a539a1daf782f7a2229aecb713742afef0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.9.0.tgz","fileCount":14,"unpackedSize":33764,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWeUCRA9TVsSAnZWagAAOSIP/1ZTXlGWGbdgPap2WMSL\nFfBV7qAMmeoU3Ye7+3BLiQ8g9d9XrdtZuLz1SS6IyhekLfN2uh3ztgJl1216\nnUatq+VJ12QhzKAUmAn7GtjwLPn6kdy++B0rRTBN5WsRJRIplXcdcPVVmRnE\nQ+2FDTI71iM79SJ4duN9SNi4oDfax6hm5nbeEw650vQXEA2G7DcEyL6rdJmB\nXhlNszRV6HHv5ji4wmZLfwR0vWgHfsS3WrsITr/R5sD/8M83OR388YhFzjcI\nb4HsNpkNOPhEgggyYX9UOhPwBY29qUoYkq+JzoYxJATrqebkR8Am7mRYEH5y\na8YAU5cBWYwcBtKl+iUMo9P4pguCfvhUBHzxuRXgBgd0e8GUP8xLNNNXSyQA\ns62Odps/m0RXfbSQn1H6JCPmiweRH39aLGvlipwuCfmNykd1RvVQpvO8Zoki\nOCyZ51TD6OHGqa0XSqprN1HcCVRcri+52JE30s3BTf6/VyPPfcWo6yhqXRcI\n1dbA5itA9RlIHnLnY//zenZ55dP6fd4Suf4AWswOwlhPsgFK9YkVmPdtEMt8\nWM8CmNPGSmh20rmFpPbGfZA8lk5Z75/27fLuYc7gz9gR2JXWRVCEBrVkNV0z\nhRD51K2GL4ixZuWBRwYQApavoQ23iVmn8LofjkIhWdF/BPJHb46sXEoIb+bf\nibsJ\r\n=WcjU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAPHAr198rG9B6uTI25FMXzXRbyM0g0rgAutokOCICKRAiAvdAg++g4obm3fCuHlxxeW31/tx2H8RhDZwqVlJjaAAQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-fixed_0.9.0_1569548180203_0.926553211315285"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"^0.9.1","@material/top-app-bar":"=4.0.0-canary.e851d4f40.0","lit-element":"^2.2.1","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-fixed@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-gZR1EzLly/zFir2JE324MBSA4R7jC6a4+qfOM2qWATUIOFsIl/TKESbF9iUz4NxMaEwuIdsiOvmLPXhS7FYyoA==","shasum":"4d52f7c7b52161a59cc23d33bdc5edc5b0a727a6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.9.1.tgz","fileCount":14,"unpackedSize":33792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm4FCRA9TVsSAnZWagAAGFYP/0hJQipvU5Vs2XB/eXbP\n2fkp93GQjos1zerUj6p6q110AfM+BA3S0uOviFMiV0/olXawX4Ua6eeHIeo4\noOOuoGyR3sKYVjBsM3tow32N4qlOJLOfhxribbE3mwy1GtJxfQMk59LFfgRr\nAZjbo1+DPGgf06j6LoZzkwi091AT96uiaQHL9id5wq0a0RCJmd8KU5Lr8xD4\nwezGXsMraDBeKLHrL2hdHLfRpZnZVbhnU9TeylDQHGJlan33njoMpnyP+ADp\nLIZCI4WnX5CYSNFJiuVql9w/i83HW+wdg81xGtaQc/FAGPJZRr2HivgVszF8\n6jo1NH/x0+lfVIQOcUw6dhZcgiyo7Fb6mnO2u/ohPQjKM/12RoAMd2hMuo3X\n3mu3K7P0CRGzdl16U+SvhU78P46wi7ilmOyJZ7X4fqG1uipCappcDFKWKoBU\nbjsKH2G/ud/wffFT4/C2pd33pF7v+ZdlugwZM2ju+IQduxfOQVFToRTew9n2\nnkeCCaU8M0Isz8DzHBHY9Nq+9klPUaDBGi5V/Cple6fuTxWUINeci+EdtY6D\naXGZD368+V699R4R/0R1uxMi7KBYZezAVpcbgODYun3OFC/ORl3L7DQK0eEm\nnAFDuoiwHH83UxFCvbWXnQTwZbVSKRNEqUl30nr5SZp4GftYWb8mpirIyGHW\nKcHz\r\n=HgAx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8n7MKMeQZV5idEZizpWZ6Q0PnM+Lo+D3ivZcnHy4bkQIgL1kLqdrgS5hs5hdq//aWe/vAiVrB5B+yEH4GtIZ6Bn0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-fixed_0.9.1_1569877508774_0.823653778748908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"^0.10.0","@material/top-app-bar":"=4.0.0-canary.e851d4f40.0","lit-element":"^2.2.1","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-fixed@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-CY0G5AqkLOU2qgOlqHsTRvXUYHAbsiX8dRR4GugRYvSbG9V8gsUGS6jkhqz1wS2s8R4OefV9x8+OGcKXMoeRoA==","shasum":"4e4a5abfe152f5fa660d07bbd5fa8cce3f8802b4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.10.0.tgz","fileCount":11,"unpackedSize":29048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRAbCRA9TVsSAnZWagAAZ3QQAIh/ZDpk9m7aH0mHCcw1\nsCAdMHYtxYka+lD43DvEW+O7hYpUYfkJ2WBe/opuLfSpOj07734TkRpVoa4/\nyFW16xgS2hSmn9XUmchwJF3mT4aVQ6b5Klmop0OfS7G4HgPKMCrPUwRMckmt\n990ai94Ro/dX0b9EejlHER71hiLzhX9GlFNAWP9Qh8WHq2Upmw3WMI3wCDhm\n+uYNs5Y1iULtUpVrGU6EW1cJH5od+9A0PBDsDKrDUdtelX0f0rzcy/9ZodRK\n0BSoc8LCImsx27n4MP3+g7b6qCtb7rUok+h7t0nV7FnSe5ctr4Eqnx52kt+K\nf6g4w38nxjr9koQVMijBezbjInXWQXoxL6kxEm4ffA8GcdccBtNg8evn0TUj\ngX9EJzc0qsCT1gBhkZg8yOfMS9tKAl9ARWWEHofH7Lw9U8BM41+c9zpHKvdY\n+GZfnwJ8TKfp6TxnAIj3elqSLIsZ+H6oJ+AXrvXC1sJI/WsTGpOlGDpUuwhg\ngsHF91cPYBxR9C3DDyhGkLeY5wHdla8Djp+xkzfsSUSp/Kt9AAOqH/nHV9Vx\nrycLii5sC9RsSfltLkb4dnscrSM61VEXRpQEcYRUdWAEWxnCzqRObSI65jKf\naDWAJhQdWUMm/oZo0DmrQLmVjFLKAig+cwBXnaIqft4NH/EjjBHCQV3jHaWH\nRJNX\r\n=xe9H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC7ebBnDZIWjWTNKuoOEYtJknKrR90KyQXCZcXelNrzhAiEAogps1P3NH7X2PnU2m6Ei9hJR4hjxK2E4mvDKVk354Ic="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-fixed_0.10.0_1570836506926_0.003753278465528309"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"^0.11.0","@material/top-app-bar":"=5.0.0-canary.5729943ba.0","lit-element":"^2.2.1","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-fixed@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-Ba11feLelKgQKTfJo3NnnX4BiNPcaq1RcTIh+TRr3Kv0eOOcqu2ZHpRtr8QnCvSD3DlRMuGSWy3eyFEHwRX7IQ==","shasum":"c3a37c48830486bc94a9a3502bdc28bf36a81dae","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.11.0.tgz","fileCount":11,"unpackedSize":29048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z3vCRA9TVsSAnZWagAAOaUQAJ0N1a8Q8eGqVLO1FYrK\nVQwuDC2Sn4VmMu4OvmC+rEFHa/AcbdNpGnBg2EbXbwkwEGwz/R3FEjwyhfmN\nVXCj7Qt4o3HWb7Q/jBqpSxgmkHQtjd0gZA0V/eDOT5LmJWS7XT4dw8H74C0u\nZv6vTEgSEYrQSBCuBomJ+NnZeRJchpi2m2bg3Wzbvq8F/K8rMBB3ytDARnpZ\nECfDswRKtZhQrRTaMlWwopN1UFDX3dfYmi7RYnmt/f2Tst73fOiVKoPMtUuX\n3cBd8L3iA9XyUao2KMmTvLqYxvWF3ZF6t6W8IBGb9+H0U/GUbQ5/jeisukhV\nJlPBpPWjWk3mhWsGmPZTcKtwb/x36Q6Hc9yq6tq/Qxp6Goq84Nr8q51MjGSZ\nEiMZ62WTkiIL3aDhJBl4rqMsTuPTsGqIe6HuE7xXUMqEYidqLB8ZobjZuf0a\n8AMAnlw0ESu4a+cBszvuuNMU3fM/JqGz5+yqVElDCCRsdCaIU4DaGcHdFUVB\nQPByP5xqMKwNGj8wuUh0wa+KCFq4Rt5wIn6gzVBj13d9xWen3hkFGj2JXwoD\nN/zHT+atOh8y04KGcxKVI1wU+wotQeyrC24B1F1iqWeOy2x0Oxk8GpWpnRta\nECECetIASxufJX5D1a+rkZ54OphxUBYc8eq4vGJOKwpiHlYcMIHPt0e6Y4fn\nqQrp\r\n=CSdQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEISWR2DdmGkqWLdhoV/M8eFgrrAQTo5wS2fBrYfPg7TAiAWzSo9LkOCG0V+2DzL7IiOzNNJMds/RkPXR+GAMm8A/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":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-fixed_0.11.0_1574804974817_0.2307770120709438"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"^0.11.1","@material/top-app-bar":"=5.0.0-canary.5729943ba.0","lit-element":"^2.2.1","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-fixed@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-QUK/Y5ZjPskNZRGG8KqJG4wYom1B8JtDEJjzqL3Eqsl6CEokz7+vGoKK7/SvUxI2i8S2tX7f+4t/+PIGZoaOjA==","shasum":"6319a0f13aae54e1b05ede4a58870f2927a7821b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.11.1.tgz","fileCount":11,"unpackedSize":29048,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cLACRA9TVsSAnZWagAAQU8P/RtsYiDK0fr50ul8HOQT\nysU77j2luYzsOheb+FEEehf8VMB2WZ3M+C3Y9RA5WTQwuhn9p6L+p9WuSg8k\nk+tnZCnB5DaWg+jOClGBMdV8WDatfwxY8bfoAkjBlAq0s39kTv4nn9cYLnv+\n8J0tczqyiiMsl/S3IX4aIorNLWw3GMIFFokuMY1cPl9Ck/1JORfYfUfWx3zc\nXybIBKTtNihvlGKqMHqJjIbUVBmDHgrcerdKZTab0vn1e8ip3/JSchexLNHW\nUoP2pNfmPN1DVkMeXodPHfBjxTYWn+HrNRXrNwoxk5NL1aGOiwmwW2DRozh9\np4zFNhrBHhyizioOgHVb18cTY1MS3b+xbkU4XjTxZ5vxwxNhMwzw9nP57mnh\npusKhW7+poIoofd0YxCUU7wr/55YFYlRGg7huAh3DqhTa9Qz7dyNW9NXyl+4\n5Bi8xdg9lP+YvbnRePxNSteEfYq6njlo4v5DOd8blb6IJfn30XhtLB0iK5Xw\nrMmP457pDtOk1kGyKkp6jIIw0nMs8fptpyfRPoiAFR+NA5x3R8OJDsiGoxIQ\nkPailtli2Btzc7amBhuMzEIYCJRRUvFMBdwOnWSApbysIphcyFq9ALU3t7Tl\nicI7LPEt0sCkGkAy4kGjRhWDbbCoxh43E7khOKrSVSwib10gYXGuRkVfBzki\nrnVg\r\n=0Xz4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBHO++Yh0YOGoIYYeqRqtvQZ638rxSIk90IPgY9AXzEHAiBw2Ppk9tXIkMjkYaLFgy8bJWcNxAatzwW+gRU8RuQBeA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@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-fixed_0.11.1_1574814400471_0.9981059182597019"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"^0.12.0","@material/top-app-bar":"=5.0.0-canary.1c494e567.0","lit-element":"^2.2.1","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-fixed@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-fTejwroIuYgEgAXgKOrbILgCoR9MVtcmw8dgC0aOjJYxa/7u7nKeY2hJxGTX/9iujAq7++P8fkV6xM7rkdOKrw==","shasum":"380032c6f77a4bbd5b027e04550d6fb11e473971","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.12.0.tgz","fileCount":14,"unpackedSize":33841,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+WkxCRA9TVsSAnZWagAATJIQAKJlmb9ktngsiCv0lDvY\nIiSl7PhOvNi9vqqVvve+8SVT+vXYE+oiQ8paIhVOTwpsLbf1oDFTZm+HlUxf\nSYv8vZQhTrslMK03guxWpAL0FgeQy+DfhpyeeQIHfmnrcaJW0YpgPa4v0JAX\neS8jKDfEGMdWqhWnOFZCTQKGYxbgEoUEKduFjnEq88cbXg4IeXV2OpqqrkS4\nU3X4sJHvjZFr/kR0qk9kkrjQp/6oNSZeLaMcfCQsUnN2cc2OjUZ3mbGr/res\nzrygTmQ3hwvkFNKE4gILNaP5YuYfZrmVUQLfXYL6Jsg3+t+ZlvBPe3KM8DEO\nN4Rn44s4ehM2dddz2gk92JRghrV2TJgCeuKrjPW9CODSYeceH25oCACUtTFY\nkYg49ZpVsf6sUKHgIZlFZ9NKxndiWOQfAqLLUmCpuCLfkc+oM2yib+F+nqJz\nf81naPRJtJMzIJlYKo5t3eITtxvCLJ0/5ML2JIVbE7/XDBEWe/rKSG2OZKtA\n2kTzMiYQt4/AnziIKoAE3pTARCeD6xGu5ug+MxIKKajyGGDwYFJ+/K86gHAS\nxw/cqB+W6u/iFzs0gjy/7c7sYbIQiGUoIIl8SH65lMAMWUt+tKjFQ4GDmizc\ns0Bnnaui+WFxkV0cTItqDKYFJz2ufpMZT/mc96pa7ZlhGbhrgitjOFbiwIvg\nO1FF\r\n=WenM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIHlvBMCFrlLyzeNBWwy4D0/F976/XBevHRi0kiLjcGAzAh96x1RA9eX3Ub4afDiMfLegm7bDa3HTtWkoc0+aQ4eP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-fixed_0.12.0_1576626481392_0.9352757249062793"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"^0.13.0","@material/top-app-bar":"=5.0.0-canary.a1a0deb3e.0","lit-element":"^2.2.1","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-fixed@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-LIoh+aN7xgULNjBKxnGVIz0smrv0S39JbHTDioaXKDjoELyENf8VggehP6NsZhDNm3XKN0dFHOHuFBPrRprMQQ==","shasum":"ed5f29ba0384d1ad7a854ffef8f8034f342a525b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.13.0.tgz","fileCount":23,"unpackedSize":70875,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPczCRA9TVsSAnZWagAAch4P/R/gEny0ppM7uU4TEmak\ntUtY0ExH42DYZt7oyqTwB9n8+7N4BgGWC3E54jwAMUFi1mc7thrZmH5naeef\n0krlJh/XE1cVUg5g1LCNj7dAiA11/cRym2eDcjvAxJxVu19meJPY2OMMkiD/\nyql1zG92rg4VJoVMrfPzMXvRgbZ75s4tpO/0wfWmIkIhsAqj1xUic0nHJZnN\nxG27kkQzh5IHNsS24LmOEaU8SvAvAMLqVUnAMsDpOY6uL/+LWLJxWG3nYhBd\n5PjpiVFyfrVYyL6z287wntQ8YqvVzAMtDb7Em2QEnrRqrUjttINLX/cLzSrV\nutT3vXw/9KU8TEZSzw+qzY3rIet4cdd6iM/7DBNrYc8IPr8JfIlGqtdWt25W\nzVp+q1MMZFB5DBVTrD+cDJdhSWor2E9gihkMH5/aPpTGN/SXQbweNUIr/AjI\ni21lEznMwwbFx8iVteQeN6QshIA/EZL6R/p+5TMeEeeQF3mygs5IBbvrVoRd\nfgWTy7MhSjZiAUIQg8/YyM+Vz9pqRtavh3s9A7NueOVpy2fyy0my41vw5gVI\nuZiqTkiI6yEM8OQG9mgU7Azc0C179EkyfPcpPkvquTn12xPNamaE5LMhNI4K\ncaSBLBQD4VQdwzauWqQcDb06RnnlUgArHj/LTDKLN+QlRHho4NshcCJjJz4l\nTDCf\r\n=oawb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICY5C/gCIOXC9hKZ4orf2F8GGKETvK0f5qRJvAIEcafgAiEA4hL4cZXI47HZ+S4079LV02QG8vWGRqTKUsDG1qYg42k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-fixed_0.13.0_1580791602653_0.17193174901404018"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.f790f713.0","@material/top-app-bar":"=6.0.0-canary.781434a92.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4ccf0f734c9b727a925e62b9999d4380351c7936","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-oy3bfq1J2ydWZarE6W9RQlGP+PnudcimbHFEA/0sJnoIUXZcZpJ8qbySEij6TId6VsmNCleRwl/4CV5naxT9qg==","shasum":"00a8e900b2986e5cae595550a1cb6a9de413dcff","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.f790f713.0.tgz","fileCount":11,"unpackedSize":29407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHrRCRA9TVsSAnZWagAAX2kQAI28ypnOIecFCNEN8D3/\n7ekpsOpIb5BbWaikKsutoomGV5UwJV9DijJfga86QC6Du8L3id1VXT9XytVO\nSoCpG/1eFBiJTZZrp38MpONmcMGE8s2QatwLp2TYB6hDtN1M/fOgNFza7qfh\nHBLVARGll1pppJ37YEIryJgxOirg7JHPIBhiWoB/y+P4gu/qO5GpoXJUJ0HR\ndWI1wWIE652eN6/oFUflYu7rD/KK/t25JMJkz5GrGOisofdEUumLpGXwi6ej\n+sim2PFkLc3+uG4nnvBcw6j/gsSYeWufO+T1ZAIPgAUNI+ATVlYtEs9XWq1/\nI2ziYhnfZfb4PLvhNsUUUcNsMFR+uyj6U7dRL8MUhQdgOmiuXKkMN3NQjbEG\nj80jGZ9dDLqJsiWkTO+G8chSqvNUnRz4YVaMj7aFh9CNMcZpfyS9wvVjLDsd\nIuAK2LmLJCAWAztzRZBajHibT4NuXHIecbHJgPd+7a2DuiHlgw+roRXhUxV2\nJHyV7T+XGXS9+PW+lHq8lKoYlARELWk4Z7UKif4HuZhYDErtKZFqbPcDq+aI\nWjDsygmEqi5tqicS1XTa9BoZ79zsgxhG59xqoPPDp30Rxum05ATfr4x6oG6d\nF+hq7Livx4eI0LqP65eef8EXUoYZT4Ukz2yiqFIHmUaZzVwFe9sLgq/pIGvm\nF8rG\r\n=o15N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIApVPP807DZO6aWtQ3akMD7rUg9Ll65rh/b0v1zGWs2UAiBEjV/7kEd5QbMxWDaPabk/PpLxHccip0VPJLb86KF3vg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-fixed_0.14.0-canary.f790f713.0_1582856912786_0.9595002759007007"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.c759cfbc.0","@material/top-app-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e0a8ac49c085c004f390a2995879e67aea1010e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-xFOl242BkPsxPw9l8HED3Zku7QIGwYKdW5niQWWPiqLaulw+0CvHNNOxFMBLPqTgpfP7ai31R3bCjafsWYuIsQ==","shasum":"4c2aa5b221df24e9b9b2bf50e3b3f7760d5f1dd5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.c759cfbc.0.tgz","fileCount":11,"unpackedSize":29407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWaq6CRA9TVsSAnZWagAAYU8P/1xmBSdlxIO7onNPNLZj\nOnyYCs+UoJSW/C4gmenn5ot5ocYDrjnQSmR+7NZkPAmHiOVPBF0NqKIh+GLd\nfMJs11g5saQXXZvLBlGpUn1QdbFsHA9OyGHNMFiHZtMGHeQlqnfJ+CRIBPJn\nIgyjTwh0i2SZGQnw4/m/KlMxuCJmu2oHY0er6SaFlLRwfvxauLxIyrUHK5/X\nZKPSfA5EJv2AEKnYLSEOtRhuEVXDDCdN58uvk3BXL5ivOJEWFU+ra0TpO4TV\ntln8zVPghfvcTMIp3gexkI1M9HzxGpUZnlbhQbi2oDxLz9sl0UuuXD53PLI4\n//Bs59ag6m8FSOATa+fB5xpZXvyvKTFnmy+AlcqmoKJKhwBj/om3OE/goSZc\nRf4fRfTgQZkBHWuZKIZqhhOd90QJcUeQ+zbkqqJcHkPXEmhswXxVJLpFOnr2\njQSNI73m3Sr0rm6twUn5i89uKO8kV2PlCZgI8cyCDh6PRH4JoUK4guczHeQi\nrcBmjZD9TgseBtaykpyh7qThEt1TddII8TgDkjlDtDkp39GcU7USyNwQOURo\nG16lX6+q5ysey8uKnnR0U8RjkL8HgVLyaSx2ZTt+4MfeBgPsTS3f5xXKWp7Q\nhFQLCxUl1Qo80HwDM7tui8giNvs9PsUS9PAm3Mfm+D9AULoccObEnWZSYBOm\nqVfP\r\n=1d3R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC4p1PE8I8+drsYMD/vz6OuhHvfGpZwoSpXDGxkc+OyCAiAOYr1uKO5HJr71hCAwHtD0cGNP3vtFtU67tyPkSdZwHA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-fixed_0.14.0-canary.c759cfbc.0_1582934714481_0.7311968202063901"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.97ef53d8.0","@material/top-app-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c6865476c6b2c4ccebc9f20145aa8fdf93e1252f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Iw5PL2MeY5F917Yfu58EnagsnxYbp3/uARXntUseikv6HrjS+QwVSe6e6OEKgBiMAMc6PutwdEu6jDDTvLcoww==","shasum":"3d2f7a38dbda09dfa40c239dd24d9e85cd8efa06","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.97ef53d8.0.tgz","fileCount":11,"unpackedSize":29407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa3cCRA9TVsSAnZWagAA6S8P/3BCh+hm8g1R8oMJitnl\nqdmuidXqLOrtIvL9O3FBMoPKfC/e2Hz+ef/JB9TG+gTY4D91e70RNiXYkxCG\nZLq7Zx7Qbs36nqKLrEHezO0RYdqDOfbejqFqVzcpnIFnWgo3b1rhshBUGx1M\n0+koawTxTB4tkq8r8XLnq/Ww6sSzH9V8rW3Oq4chEK8dt7zfNLGRGXU82lRm\nJAfMnOaTNqOlND5eRSTzESz7UQjPC+RqMLQiZBbymiOBLv7S/315Xn2ACAsO\niUEnZ8Kkjb2M8ivKqrsPxP/bxdpvnU44FdPxLhoqMHIluNU9RQuYB/glM2sh\nVBzj/OZpWY991vOjzMV+B9QDqUZABOcq6X0r78j1GWrQUdbsmA3Mml08AVIj\nlMaJxDPV/uBvBKyIMZAtnnjAtzZrOvoua/5K/mIU0Y7DzwqrSv7PDhHFlyam\ny5zqk6+4b2JKdzCh7p0U34ccYeA2DUixF8ZUN5GjumgKkGWrVqhWC5/8Yqxp\npnGETB+jw552eeM32CZYTtQAZghzVYKga/oG7gUg0zMptCy9NZ+kk7LKOhVp\niyYEkoLX7OWF3SpBKfmoydUJgDxcFz+d1qQ5w6pYPOUaECJdKXWQzZkRad75\nPMoFC+x3q4wZPxkkcebyaWOwqa5P00PE1uKxvCgnRXt5LPCoi+OezZQjYrwT\nBmTD\r\n=jYPl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEXQM7RfGhbLCeKwvUxOm23P90DgsvGxq41VFvs22j2QIhANIUf75GHc9oz+Ree7TQLuGGZ3EZX2eZ6YUDLuI3HmkX"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-fixed_0.14.0-canary.97ef53d8.0_1582935516215_0.5194301311253788"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.24f5fa6e.0","@material/top-app-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e884595521a6f82f63b8dec96fc4450410e37a09","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-TKeV1qSGqCalogh/1gT/yBDNc/tT/90A8wQPM4iIJ9RIdR7BV8LBKVPEkqKST4X0z1IwVIfoaydNE/0uF0sjuQ==","shasum":"20e28fa6d1a6ece21b74f0f971b2559dbdca93de","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.24f5fa6e.0.tgz","fileCount":11,"unpackedSize":29407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbmxCRA9TVsSAnZWagAAxd0P/if9n0ybwVdMK28BVLSj\n6RohkgwrEGfbIRCdCDPEJLSTV6I8bHyluRKnM1ktDJA659NcyjlA1/P0IZ5v\njBl6Ubn1Z+FfltC24Bu8/blDMJ4QfAelSHkRamzpoR1j/xnLlt8L249iwMWb\nLsfoVWyzNej3in7vnE4JgTsR7euWj0RJxLlExNUTtisiQbMbWqRn4z2nh8vm\nwRzWJRBQadmdRMs/xodxQQfoW6XCIfCKAedCTqDcQWFv0NpGgVA52KaekEYT\nYHb/crOQutJ8sjt2KxTe5XJCRhQLsQP8V1sDFDfp7Lq4XEpOMtpuI5zG3hTj\nA8P8yCtfizl/QpNBUzBK/7Y3D3LvLqBd11YYDJ/mumr7+W230M7/glYKo6Jm\ncBEdFglDSsR7bUO/ouT46dzMj9j/v4I6tEniimUtcNvoVMQ8FphFid6NoK1M\nXq14ARV7tornYcQGbMjD8szY68NhGv5nKiiozwFy2QnKB9DyNO69nqtTJGub\nqnRWVxN3U3B29SM6pxUTCJD/8RZ66AaxXGTH+QrY6yXLhPNMMUVINbv0R37u\nCs1+9pJfd/1XtdVYFxbmeS3OtGvwA4rdiBKAltyV1UKpb0A7WB73iegAOPwm\n6sQayJhijBviFDsdMEQwq1fLZDmMD6sKRKnXNm0YgNjTAWFnXQlOvHqKtf/4\nd7mA\r\n=H1lE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbs3Zyj9KyigqFWcoGIvaDBASTtSa5GK+JIntpnpUMPgIhAL21ldaUzpZoT+kxJ/3kUiwLGDadgwqxEpbsdUrHXNVq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.24f5fa6e.0_1582938544686_0.3759569098220197"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.960e214f.0","@material/top-app-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c56e2bea6eda03e423f3f7ba00cf95f684660f2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, 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-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-fMuDLmULVsNqLEWvJTw7LZ17gLUE/WJVDM9lzy787nnf7eRkgXFkc0LgTav3XVu0yR6cQ6s0RPOmir/VIjwDWw==","shasum":"0de475691cfebc089b3142bd5a1126d2a2bcd0fc","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.960e214f.0.tgz","fileCount":11,"unpackedSize":29419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdXgCRA9TVsSAnZWagAA7sQP/j4uBj/BtHixwth5FM16\nWqYUHpjvonF523QUTP1W9Ku03+INfrrLWGZZ/mLxWIxptP7DvQn6YsJDAuBg\nFBLMH6pTzd76YsAzCUX/Z+PfIG7/r3ZGCGdcr5j6IWs5/uGJsZsAYWDX7EoC\najYpm4COvghegs6+7wVplc1PRpSyPsJEOO4OfDB3YtFtgXGNcCjtshllS2j4\nDdBghuMYnYX1Zc+swP5SaVz0r3TmcBgE8Y9fpuJq2863nscy1hY+EpIG6DV8\nL+TnHkkVMOTVcTiuabyHhSErYsIWxzMe/y8qMMRq9JJQcuNOHRwDJr4s65Ni\nMcbWPbgK3NaOuyWHAvY82oOAdU/CTeSKwJw3fLRW/Buvrtu9ACUYcJMCDZke\nRrkw7IfFpDRFLkNiFvXJwgwWfNzwpgymszD8oyrm25p9b6FjLNv7eJgCN+lD\n/hdZY8+hScXJZW9jPlwmM0hEsIhet7jHdZ/TChAz5bb+DZp7OE/HILEWdcuQ\noN78YVKmmCbCLEy31b4lPgQ8S1cDYMEMgOH59dfCK2nuG8gXW6qwqz7YvzSH\nDYSPRlQEYjKEELmqwDoXEl7V2nkVDE+qsk2L22kmwMJDrlZTfhFlNUTL0R9M\neBrMaGwzgwEQ6+4s/f5v1IIrZ4qWeX9ltZPh8CSXqCo+B93wAhUGNJ4MQ6Pq\ns9x6\r\n=4eHV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDnFCy3O75buQLcUI8fgwnaoaYZj4feTiGAxuHbj7ZXgIgF6h1naDGBhUxYjKK+ikke6yARZH2EjHHta7Uk+apTh0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.960e214f.0_1582945760264_0.7187070212368316"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.a2f046f5.0","@material/top-app-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b2845ca1286088f29e79c96b6d5c5367873cce11","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8obL2CWVPtZIoCfC2HJSV8VvdWTlU33qGp8n4nU1Fo2cgUqunDZBlatnfQLhC740uSqfZWqvFJTWADOAbKObSQ==","shasum":"3c7415d7c13a7bd57dde44cc8de457aa37a47a28","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.a2f046f5.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXatbCRA9TVsSAnZWagAA9zAP/1pDQk85ZDxspN/4ZELT\nKkneJN+wXl0XM/nccvYMsnIgpLlMm2YrwL5GArjnXwHh3AApCfsaA5szNSY9\nRgmZhSab8uTvjaoywU1dONLXacWl7QYgavvL1c1xKjIWMNmhO0+zxmIv/z5Y\nuMlD8EbIS7lhXrMUOwo09pFaBtHNkCx7KZkLaoifKD/P5en2wAqIRntlwMbn\nEoJuPBfhjycI3DV+L+hFHkRjhsh02stTKdt9JvS52sS3NHwsqhbDhTtiUwUL\naTI/DBfYzkNA9YJBTgbUoHgkN4sEfx2jXnJFgl3Y/LQx+MUceMZstGehtchK\nbNCf46yr3bnubq6D+MC1oskFbrDcikS8KwAF6RCQYLIhpaSwdwkx/EMNXJY+\ngMzneFHxc+iXpmi84d1ugJ/l/zrP44SUhaGwRblQ4Sm3Bc8g26h8a8HBA8IJ\n/3cLbYzFqLRwAgQm5iUxaM0M4INI6ADC/cl5+69IK+Iy/065vn5GnJIM2gwD\nM09ZSyEnTgpZ+drneXpi58LjgvV90B622eYklQgj9qtu85LlZ/8R1dCtj1nZ\ncOQHC1F5GbPNuyVbGy9UB3sHy+Lu9vhirPZ/J2Rq+oDJKqbR8HUQ1xjECGBA\nfSuTcRzGPRF+/D96rYHQv+8LnMhzA76KIUPO+MK+hc9CeNgLLSh5QmsO1dEm\n34GG\r\n=K3Vx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDkO/y3uepoGRCFANdKPoSxD917p9Bq1MOon0ngOlMPVAiANYzjP4obiXGUdiXBUEZONxSc5hsGdGnulN7XKi9oLNQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.a2f046f5.0_1583197018620_0.5771693553173058"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.024f371a.0","@material/top-app-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"efde2be2f22a9a7e20f2b0d57c4cddee405ada0b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-OO0q0L6JJT0wJMUVgK5txaJPNw+joibiCVYk+0Z8A9VTf5dAc4pbJrveTG7lNPY4yseDb/MHoyrUEDKDRKVZ0Q==","shasum":"e55e1c83653c7caab0cc9abc35af28da8cb122e4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.024f371a.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbLrCRA9TVsSAnZWagAAPJkQAILz01gl3ujojjanhO26\nzMevp5hXrg10hRwOC2P2Yvt7GiDoZTSH4ZLOyXeYECU/ol6PraHDRMtn1C0x\nU4OqdQDHP5lx69hkbeUeTm9U1a928anHd0Xy0lonAaYwuCLCryIsPKrVDM5k\ngp9KHrCH/2B7f2d3Y3ZKcMMXnytlhldKzS3UcDhSQ4ZmK7D6LcO2dUyGfGwP\nF4gQM6nMABQ9V4vrq55MbiGcJPoG0wfgYU6iAU+aEJPo/MDoJ8Gic1sr/41A\nzzNJIl3RyvTJjk/VtuiGMxBXOZHALT5mo7RyeyoS+t/sSgJ0xKJNl9vHagmW\nrYF6NYt6M3vOhidGkIsEFXpjxk/12Kute8Dc2ZVWyM5+9jBDF4anUZc4tM1S\nJCsinK7t+O2szqH6ip2DR2qPiwx9ms/B7bxzB8rUqkkSW9oUS8xrA/QMWiFT\nZ7a6q42bSU7yQfBZIcG9HicYvcA38U/KlAngfjjQycpBq7oMwnZ3/DtApol+\nbF6dnc2RtoNP0OOLLNQgPMxyau/9bFCHUnTC/z1kghZFhKFH99lU65ELg0XL\nARKm/4+/+yPhG2BcsCY3C3HctzEc1A7ZCoIEmsvmgVq3spMvUPN+Ti8rBQfE\n487YBsMQ8w6z6YQuaoxlLqCEN5SPNSdzz9FZwvQYcViIreGlIxGQxT7JDh3L\n5V6n\r\n=eWQx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKokESpyu90bQTJBGSvqlsLde+O7vTjZbgsXY4xHaveAIgZf6TM4MTYXliZ8bFVl7Vg/2zqQ7UxgUCZh8FuW1Cd4w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.024f371a.0_1583198955526_0.39347212916411034"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.2f164110.0","@material/top-app-bar":"=6.0.0-canary.9372e4939.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"288331a2ec51b59facb4791d01e4d2ba8f4b7cc0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Vl63K+6XUJYhgNoJpACKvwTv062bwxGsKZ3qY4n2EudhY5oWY928mgUsgJKqc9LpUWeyqM2hDj2uv/F1fVbWAw==","shasum":"1074da9c7cee0e4d30f1f684ae300c9da14843d1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.2f164110.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs1LCRA9TVsSAnZWagAA6aYP/RW1E+PkWzJqLgMxfkx+\n4QxzN/YHolVN86MY9Zop1KWqjFSaHLcfQmR5jQVrPpG1O/b5/XmGMuuKf7/r\nG1bL9EuoUvWVcKr7zGROVSt0dfijIjrtN4SigiBpGGwGarzObFizf0Gpf6iO\nRxvsE1R41bKUuC0KsEn3sfQN1/49NyovpIQ5ihuc0t25AnhuBPoQKi38vO6z\nWNOeLzmacPPK629Xx6G3Z/1PVnQp8QrMIYI3T6m3cJ9G1tcrSnRQ5v1wd12t\ni/sYP/1i5MFvOTDrdcEIj2AAcnwuR0N/2yI7l56gCWzqoGzP6jdVshkNzMcn\nBNzMhGS5Fg1hTryZ7qkni3yIo2aXX2IhWEFdx3jbXPo/tQhKNtd+wpJ2cBL4\nsphCR5/OY7Vk4KIlshTRJsdkOeTSpWCrz5TrQiFoKdg8+R/v8KHg9SXE7IhZ\nNnLbwMaEkOYinCZbWTWO+Dhdymd0mtNTq08PNjoY7N/u7iotjRFGt6PKFk03\nR6BbYKivVBMDU6NghNOmiTaR1YqAcqlqoGT66VWaaxVhwrIYW33wtpWjqNUF\naGrZQlnOnkftb6zhGifAd9cZD02QBjV1elkFmZatqx16yeOQwkgShP+KN9B3\naJHuHwRjhkDmA2QeaeUB39aoFEd2NFDEConHAWETYmHyAFaLALhNcmYoqrCS\nd14h\r\n=rDyF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMsXoREskpt5/bEtmhuSvmUx5xnhQgBkAwa4UCL7sOZAIgHl3ThYZPe76HW1CHNBIQMaUsAjQvU7ICKXYjIrJgsaw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.2f164110.0_1583271243433_0.1192641083953423"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.edd465cd.0","@material/top-app-bar":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3954ee24dd2fd1d9171cd7a967586e7d2b34ae38","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-sgNOj2k/pS8hsHZmXDsoHPSf0lDByv2Ij9ybig8A3HzW7cSjC83oNY5mwqSUKAboq2KxeVxFqp5OiaTQNjIaZQ==","shasum":"e57b3807827bef40931fdfcffcd153e2be430388","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.edd465cd.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvIUCRA9TVsSAnZWagAA1tQP+wXeJ/3rNsAGWGF9kJNe\nXANju7571Y6QRWoJ2kh+d7qJWVYMuBdo9FUHGhV70llujOazjFltmwfZ+0dp\nhoqcT828Wc3zFVXUokgUIYWUp5g8WgH3IoZpCsVLChUI9fxdTn7EOne1uG75\nSl5qHa3uHa6Dqw/IFJ9kbzdw5+RH/xxWdwc9MW9lGY5SbZHW3ZQGnjdI0A9I\np9feLJE8A1EXyDckcWaMLEfyX2sbWvn3EMnl1RLtdy5aKNf9Ji6P8IKvHbaY\n2VDaJ6n+1kMvc2pUSlOtPEt24dexyKE/V/bh6UrfWTyQtuYBxCDXBw731R8J\nz2g6y993lrautUmWYtDSFjdISzFJ231e05yMZjY6YotqGTQ4oIY1wN+DUdui\no7rSrYNiiQ/BjP1pf4yWrbnb1QtFxjAo3G0c17GzIlWvu7IqGiG59ZGyS99K\nbfopcyvmJQgiSzWKOo1ora1S8gez7ZWLjKgpLQrEpicDVQa5UD64enCDTGuG\nVFuA+PZCB+dVQgUePHPkVvnSiibF1NtKyHPaB4QYmyvg+vhMLn32pU++wv0l\nJL9SsmNVFFD8jtfpmGNvBzON7rgkEk05v5FFc6XQ6vEozkHL/tyh6uvET+R4\nDp6fcgPnrUesg7SW6EfFHzrlWPgNeBKboIMY72FIdsaygpXtqWyb21d51p+R\nz8+x\r\n=AUPz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSLmeFAQXBOOZuYDVlc7g0rUwqYhzPtZ91r6Lhy2OH/AIhAPcfY5gNAHtU9BpAuNpK5DmcjpUraYUcwb/b2bdIC2iM"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.edd465cd.0_1583280659616_0.6762116446973983"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.2b02d017.0","@material/top-app-bar":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2f2999d0bc0326feb2bf856866fd9238c59ca246","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-t4YkJDSSG2ISBSUN+tfuf8l0fjipKCfGkjai3+v+h00mIGbKKRlDpkquzHM4zfoc3LnDJDL6Jj0cRguka0ec1g==","shasum":"aae09f081d6b48f80242c68d4993076bc9045ea2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.2b02d017.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA1QCRA9TVsSAnZWagAABC8P/jcRaVbykYDpagYEeG9B\nbfIA/4Rpn5mx9u+FB57cvLlu56YDoAcjTOHjNnBK7lf6qB7oMKOA80AJx0lD\n+vYDE7/51CAc7i516iC+8cogrIZtnyxxqBWWjioLFpk+YHwbA24XB835hMKn\n6f7CyMD63l5mOrHPyXOHfbUC+7DZ2yIYMtDmfLz10Flk9FbqjG/1N50wci11\nTqOaScCH9r4qzmL5nRX7dqwa5aZYEifxqrPuBlsFbevNcY1xHykYvHQUQydT\nNdUkyau9B/nArQlz3G8nHQY28y4T0XIPUj2/lzGQ5177nBO0l/Ufr0FQSRLl\n4HTbT0NzLlyTU1JVp5le1c2WRwKwVdfpHMqPe1z00XRZM79vKvnyeZVOLlMq\nm72sf2nDchO+ZCUvw1NeQcRy9Ocpup3hbI/okjB/KIEYkJZbTyH+zBpjmvfI\nSRXnrmph0OpBDQw6+F+GkL6DhcwQFt70lnJ9zyN1NgQnLzJ8YA9iS93oqnW1\nHoiIQfgFVo+MBDTCq6M/sLuSf3SpLzP83wpNqfzT7gSSO0/gZ5tLJwDQB4U5\niYfSwC6UrB/XK3r4amIN/vF08tWg3xw7dLzIHDWybPv95tW0qUv7wf/Y+qAZ\n97SzOL7tOU59eJ04WeunJFG3WYSH/Knzi7uFHASszqJyE5+/TlIANdRW/D4r\n+Kqz\r\n=W9mr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIyzYyQQtFmQoqDOmsvrF80ifN1Pq+Zik26TgvpE7ZKgIhAJJEw4mn0glfbpOOQghSwgUZImAghAbV1zloCiRzxPTv"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.2b02d017.0_1583353168079_0.8594127049173075"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.cbdfe453.0","@material/top-app-bar":"=6.0.0-canary.3657f8863.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"473c76376428d49a6811e677bf7e1450ef90b5cb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-3i5FTlUF9S5718VMAhRyjjhwCfBoU3gn3zV/bcIc4ysWWMcS3p1f8vTJdBYH7MAva6heyUZ4pyC79tcboXVfxQ==","shasum":"4a90f11307b04e8ecf255e96aebc3cc5d52df950","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.cbdfe453.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCFVCRA9TVsSAnZWagAAgewP/0rsjA1V5r+enItx/z2w\nvIhZGSPNWGT8VMory0jOVuurYPKftlH1WI8Y0KZaAob4UWgYICnn7yDX3BeL\nIKIa18yQiOG82NCeBZn9zUyUKLXf6YrbDIdumNOYJ+5YpDRvTk4negTHBhNd\ngPs4MwEGUTp0hs7bkp0xr47pFWIul2Lk2E09P11zj1RIp695/IdGA3hO2eBe\nbYHAdVbsPbuvzC5qEE7BUyoGFKeN9S6/N/2SBd5Ft/aC7hGYxnFvqPmEMinN\nh10/+XFWUqfzBBm9WRHrZoAOaDKNEHU1I6D4uaoeFSv+CDridk9q6kB5lx8v\ngZB298HUKgRvrfyfELzFa3g57r/WwZyS+N1hGGxcndNaq08h9bSViqtKhk0F\ntql6qhAk5Pr+hhbMjqLXA1CP5mWoueg3wh4ao5aTX6bPSiVPEJwAt+Qofin7\ne4y0EVVXqzYU2Cihg2AJC+m1MunvPYOl5gd8eZM5umyIdzSDf9urZ+TQI3YR\nJZ4PlM4EQITVU9hjaaWGgm1qwmYEd51HfrcH4xlJ6Z3T1QvDPPBgVSgEUR0N\nSF2Osw69scZrE2QYqG2a3ddTfZhAdfhOmS9sR8q+Suh9B4nJGEIOJXzyUSrT\nzkcPHZnnCoVotOQkLJxdYQzOzlKKPnpFsKZ+x+eZcPUtlX2M8ehG22YptD9A\n1PCO\r\n=p4/o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFgXPsMPC9C3tSdhadg3F9ncCp+aeNCef+r4RgEOdJEcAiEAjM3//9tlosNP9DWq8eAIUvFiQDiS82AyiVLnKz7SRpU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.cbdfe453.0_1583358293019_0.6302810493403417"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.02aa8a98.0","@material/top-app-bar":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"97bedf50cad33662f192490eaffe0e04894aa3c1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-CaqPBkt3lJysj04lL5H1p6PczWDaNbBRFV/8KXVymGML/0KbKupHEZ2YQvK1X4o9zrF6Z9bZQa2CQXojQTTOCQ==","shasum":"fda90dc9955a3bd94165cf9b23802adee8b73858","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.02aa8a98.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtR3CRA9TVsSAnZWagAAkSoP/1Iw1W5InL16DKMSPYW6\nYIfyX0DrJp5ONrjFUCkjvkM56qLRQFIf3X0hZEL0mveLHRda5c9eWUqXQPsL\nhf3eMm8nEJnCB4nVO80LWgRoXUkmqNky7JYDNUg9uhhxuA0Jzi5RGhpsYTQD\ng8hWLN1s3UOWk9pc0ou+3ATcrEpTkVGYWjF/ZcKvag2JyQv6lZYBJYWq7+dV\n9+p41xiG+iurv1a3LvjyBeRtg/LNTKxjZvDtLDKgVUbzjmOwfTH48JEU4hFv\n69Q9M3j/XLk8EhS2nOPs5yApRCOtmqlw+PFSQLNfgYBf6H/1iI1ZIHrfcrRU\nt+OiDCNTsKx7h5YDT55L1f5oLI3r2EW+Dzxr4Td32ogFg0k/07Dl3TJ2e7TM\n5pbWPGninvphEqfoUdq+o7FxGNbRDA6+37e7QoN24HtniAdv9zGrgX265w+w\nZsxUR+ISA6M3rXynAnf4RFYun+GBYDgi/A6REzYI9kiw1ggdbfE6MWxXzkET\n24F+gKxx4a7U6Dahqr2z6KlVLHmf0ySkgMDLl0CR+1h0/eDBb8l4evQ/sd97\ndqEWBcdEEG3AOV99BFY8EzHkU79avBAgKx8fiWrF07Tqeb0gTR7tHlCz+Xrk\nDbpEVEC0DSFHNn6IA0bQMyo5j/R9IY3aBrOdiutDdiEwRwA6DVWD8dUTOdGj\nNPJQ\r\n=vh/1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeJs1NVyicxdHS+F8rJia9amm+EXzQxnml4e8Dhn7EjwIgcBgfPJlifJSj6kAgrAvJG2awMjCNxUDmsQxRv+IOars="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.02aa8a98.0_1583535222664_0.6091649971292716"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.7cd5aad6.0","@material/top-app-bar":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02d47be94c90a6674486253c11ed001b63502d73","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-md297Rjm2NMwOBIWMsjxZnXj5wg7GFUJShducBP3kpY0KWb+lxM/RUqM7/+/uzshNhbrqgwkVwPopTYanjlyrQ==","shasum":"597ceae4e1a7d8ce51caaedd6c8bd65627f0f427","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.7cd5aad6.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs87CRA9TVsSAnZWagAA/vsP/3QjPviEk4oClc/iwa22\nEFU/heJki3P4fTw7kWnj9NbDU13VlGXyxlTsUVdUfvCQJHvcA4Xs3KSzU7H2\nJ9NEWTZzXx41kD6leENOssY6OpjbwFkvc2ay7oUHmQRqaxHVnGQC1lTD0gBb\n27YIY2BAiCSVnFHtNT6OibbU4FaR83zuyKfwjeCbrfl+MBQy6T/DHaFsg5/f\nDlT1kdgyPyKUAeA4f/CVxSYHIaWcyBr1+2FCJKo/JWwlZY5NEgmmRsghq1DL\nm3cKETvc2HE2NpZMDIcTRelXaqWBvRCZOKbIffKdg2smANOtPiD5n314VomY\naZu6sOlZMfcx3fB46a+RGStgfdaH+2tjGmEZBAm0eDU7lpe8Qg+3kq79TzA9\nwkwB9jdGViXI6nMr5S+I0CL2bFB3PHVudBqxJI3XRMSwUbnu1hzz5GP6TdAI\nJwxULqSVRErzjaHIHvgbi8QRtm06e+4loftK06hmp+dO70tP208oWtEQ7xEq\nzhv+n+hCDyMZxV4YxBqgWmUzdcpJ7osm8Y4VkheG9pf4vTCfKGOcbKI0VMxF\n1zktAYODaAddV7HVyr0giMEEPqXHYurWUzqL9Z+AK9mf8PBqjEE0qJGJy9SB\nBBq1fL3C5N4VEPPAkRvIxu/8+Ru9u3kPMaTT7jFwg4pBn22tIxLGrKhacjTN\nEopD\r\n=00fW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIECNxkOmFIZeyqO3aran45hwTyJ113a8WjJYklwVWfRtAiEA5Fxb39/XYmG599kcN+m86tSpBf5tSrxYrmzvkJymF7w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.7cd5aad6.0_1583796026868_0.7630776523672749"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.3a79dfa6.0","@material/top-app-bar":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d8c4d68989d9c1489104002dc0f43cfb89ad0488","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-sgdiG3zR+HS6gP7gyheMcDi3VpTtq1bkRdZrWEInQtHcJIVf/DTheZmOhKYRbQwFzBKzzwqYHIncRv1O4JgB+g==","shasum":"103101dc55e45b7d72f53891906f3b75b99d370a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.3a79dfa6.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwHiCRA9TVsSAnZWagAAZZEP/iHlrFqft/HDpX/4CLLe\nH48v6ywHSKvZq6TAvcxA6aRJDS2X2ZTxJHe2XSW0BVlWfKqbG5kI70BX5oIT\nlrSOZS7NRr5AljiF0Yvlpnug5i8xFv4hQt0GT6Rx2wQacNRhPzFWoyIn+4UK\nB71VyNZxBYPrQrddOEBPHsTIR/WT8xSEBsjYBR1LdDrEYBdSCpB/7bR9M1i/\nI1nJCOKEy2CuX4axygudNOtOsaIbPAosoSjdVEmYumJcoAL6ShNvjIOjWUix\n8js/NEitOXH/PpoKw1jDZuVzaEbf/dgLTwbCR0A2cMnr+LntVVGkutZJst0l\nihnJLdbsEgHhw+BiKKxta1u4ZyjiKzxipeR1Z3zzc1dpU2SJu26gZ7jGZNcK\n5ERdBIEH0ImBr9hvDAOz3CjgWcLNzI1e2sZM68hPz7St8bnb3+XXp00we1Vm\n0djRDE1y3TL1ewm9XKIP5fBl9U8Xy1A6lUjW2JZH1zZR7hFcAzEBmwaIvSyy\nL3lcPs3wEzURIAYqWiDRjZwLr9p5Rl2+dRGDWKkQOmxlQCtpNXuFSTsZCmJT\n353bjwDmfpbdpKd2GHeAhQRsj1Ki1FF06eG3pR1tLtNFmpcPjkhHbMg/WDro\n3RLSTrwuzhY9tskOejj+eEbM53nNctAt3YJe94h6FtHRvsK16oCDIH4ngTIe\nZzby\r\n=JGQ7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGlvAjAfb3kReMN1dP/VfwWnIqnXAMMi3p1LWVhNeP9YAiEAucOavkDMLHCIRoLjO6A/Q8jJBTRIyBUv9pdHhRHtK+U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.3a79dfa6.0_1583808994218_0.9075533344767046"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.22e0f5c9.0","@material/top-app-bar":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ccb096ae11e367b4590851e53c023abbb22d2774","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-mt5ctIsEM0bbaKrvqYOUMYzzG5l3BOayBd3+5UrXkeJ79YWgL73TJB84tifputm0FzAck972niVqKCZYx/d58w==","shasum":"a3361a14112ec0a76306c366e7bea8648593c20a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.22e0f5c9.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwLRCRA9TVsSAnZWagAAmtoP/RP6dU4grrH/9w9EDPN+\neHEuGKc35CbK3QPrZdF7ivl/pNx89AqAaeDMlmjffLul5AFz8GfD+J8HOsdY\nNn0touIu+kVw9ttSLLhbvxuMz+4KuaNOuj6+oMgXgEvwyH2ylPPP9HvK/ii8\nQKurCHWSna8uMWSaCmYis0zzZAJIPrOL2uwXj66IlTFN1eZZGA/L8KEN2VU2\nfK/LnpyKlGsMGK6lzZB4VpUu+oqGJMbggC9BeUS24Abpry/TcpxfY3flszmn\nInD6z9o18gGAljlW9YsUhK8wUWwxM/vCS2Up+HKVctRcEKi3RNz+jVqSuekO\nnQ10W4e4dhhUzH07c4VR0H5KZuUm5K7QgLbovWBdrkz5yZSS6+PmnQUkhWtC\nW/Esax1NQ2scXHntIioCx+OKTeKYPN4+buHqlPbft8m5sm4zduUhnSZTuD96\nD/Hk/n0AaCrAUsAUEj3xjKi/YiI5k/NInvDi+9EkybFG53RoB3GaIy3XJ4m4\nz8XESpuubALBPmfPT8NjgY/RqkNij/qFJkYy0/bsIHNQXgNi8ovlaZ0s2elQ\nr0JwwyX0pwANusFgT8isYOMYSoe9+YYCj96DMxOWJz5fmivqvnh+u1CHFA1W\nf92HtRPOQIXMFLXIfcpLLUjjdWxS8PCOqEn1Gx7jKV+dEa/h7lq2LJ/dNukn\nCSl0\r\n=9RCS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnuhbPIslxIO060CJtAOfVzw0K6rVuCuefI3nmGrMOFgIhAJwBGFB6JJLCdz01OL0JOT7flg7Z+SeoJBL/7rVEMytd"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.22e0f5c9.0_1583809233296_0.1451568374498189"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.f23a1d1b.0","@material/top-app-bar":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"625010e9abdb8adc901198fa1ebdc99269b946c4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-bB7mpBVnmvgo+iDzMvZy9TfReu21xYin9J9O/E5f/xr8TAjjg2I93u34YH2QLVDH1ZofjSYxqdJjVzTW2Qb/4A==","shasum":"774afd115b111caf4aa039dab1e4377ea5770c60","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.f23a1d1b.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/8UCRA9TVsSAnZWagAAwIgP/iYZ0V1douvoV7SjhyQ+\nwqA5tmObTQhNx7CY/lQUzi6/hB0Pd4HsVz+YkW/eZkGLqUAjmugpMKyugMwx\nzA5c8DSy9v5DjtR/2g2YZk0fcR3rgbybvvpolPM4HpmxFcKEx93lFJJz4B4b\n+S++Wq1VEnp2OmrQF2aM7r6eiucwT50H2Nd83oqLIcvCTWAUW4IqWfqzK6GD\nU2l2LiUSTo+RtJFnlhn7UGt0dnNa+UMuO6yo/90NVrIoNzT7v1atBvkpcCdH\nBIT8bA+wM1OVfS0rz7J+RBpPBa/x1BUM7rnpI+4SJ71fiaJFCO4j8qtFmVfQ\n1wcIOGIiEgb5pdwedyUMwHMacHR9qNuf8grWAnFaJ6DPffLAeNPleqk+RwkD\nWSk+EAvv7w4pwCE2qQzpjlnyA+yK//uYBSjxNiSP2fy2MDSC4Sz2bX+kCo8s\n7BZHXOsx7oynABA8/eiPBYoiT96RWjOr8UxGC9reaUlCQvVvqJsfW+a8j0uF\nV/6axOLO6zOA5SnrM4uRXbgljCOavRT6bCDrenQS4fYY/3TCh11Y8KQ3FcC8\n2H5A6UyMC1+Ih1fQw0CjWKAfVxOzej/MHlTpneqQGbY1VWlJ1BZKUq8j07xp\n4QaQioXRrMHlfHEjHkKScbnUDJCfd/vnw5QBNoeNurtAufbkBSqxy7l+1Llx\nwN9l\r\n=1lkC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4JbAjmHArfn7E1ae4UAhfEMRFEcQTIaYL0vP3kP4BcQIhAIA54pCIa4Pr4igg36mF5IQ2pQByMcZ/NcPGZOLUxpTB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.f23a1d1b.0_1583873811654_0.6666977309901467"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.34b2d69a.0","@material/top-app-bar":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b40bf9e324ad010a2ec93cf8677b25b843ad9c46","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-mwTyN6aZAlg4IOjSWiUk3RLyGYidhWfKqVuTMBtLC457qQj7V70JNEnQgQPAfxlGgu0VbdvhflOINAWH9y1tew==","shasum":"7d54fb40745a831e34ddaf8c2b65c306afc4dbb1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.34b2d69a.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaANZCRA9TVsSAnZWagAAMLcP/jo/PtppkuUukmE8Xm++\nt8hYvqD7lQh6NR/q2tgzGllb1NuXl1PcVZS5DC9zNiROmEUavXllkcsjvbve\nUTEtWObgSouYJy4QJgC+R6vkZKWxjdQpLrY+8xlKzr6AtgadJebTocdUXC1Q\nzKoyFNBQ+U1CEBGHeoFR8Dk82V6J/bR55nT86xOIWp/KHC/0a6FchgTdq+hm\nvnpjaciTZjoAxRZwhcgIEEWroMU3cisx7TMQkgx4UPQx9m46ANzlJn11LP+k\ntTuDwTttWaw1LRwlkXjOjJ0TycaHdIFgF7D6zaYo3H2EQF+KwYyDzkDvwwjB\nIkg47iB6U0EZi9zKAZREEha9Vy/mZ8lH/Q8X88dK4m0+wy+hsGPvYJwLZCdC\niFrINZANKQgEv6DSmdI/JZVBcD7kMX3YNoqe7SKyF8h2zJ2davb4KpQQ0APf\nLsF9wbDIzr0G2UdpRam5j8MMP14V9K8EByXs4raYw55Zp3G8wLl9uAu2lL4r\nQpy1Xf3zXmAtX9vSfuWHslFr2+glo2U0wUQ7yqDFa9VQSJ1e8fHHsiUmZa83\njxYFeU7Ksfu+Mrhwv8QxW2gXz76YEmuZ7VtlqjuHm/+geEDlxdtxQ4a0/Mbj\nZuD6ke7hIEqF2lcY1ZeIZf4M9PUMFrDcxex0fmaibiWXwcQ5nk9yCRobgmx8\nddps\r\n=r7Bx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHF+vF5WNMOvM0qgPY49oMZ7SerkN7rBU7D6WAFVBs86AiEA01J1aZ8k+BLVPnbyo7Yk/xjfw4ysSYS4dZwcy5a708Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.34b2d69a.0_1583874905195_0.7665526119159187"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.dc04abe1.0","@material/top-app-bar":"=6.0.0-canary.1db5c9fc8.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"83603c5af2141bb893dc17dc4ff73baa5dbc7b64","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-9Uh8y/o9OvCqByxpv2BG0l4JC+SOioqkczRgwQZrwB/6TJSG9YgVgibsfxe/hH9ScY+0Zilxp0BP74IoDI4mLQ==","shasum":"04ecc75025621a979a8315293a827045420098b8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.dc04abe1.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA59CRA9TVsSAnZWagAAerYP/RqaBv+/p2DkcktR/Eb9\nzIpkZr391vwN9c4rYxMMNYfbL1mqOLvJ7mC+1J1t12kceKHLB9aP8wR98ytq\nIt0dZ4bm3q1VlRIVfR2YG4QRYT8eir+0ASWwCNxL+4t1wfkpf1gDpOS+rqyO\ntnGeXv4MA1dfJ6bpNMM/S0/nUKtyhMYjnEGJ5UR29mNgD8lOEEcLa/1qUyf1\n1Z+WxEOeoZGLUfgmsScuPmY/N7gOl/1acv10kCa6thwSxnvo+5UtJMx/cU8x\nV2HhP4M3GPG+c4LCY/WUhdbmzGBiy4lDJjdqslt0FQkwAZBZGfZKlpecS5TQ\nPDK8O5yxRaMsj1y8toumXl53BliWTKn0F1lHGniCZ/odp2BfaEPmy7BC04O4\nqxnCR7YBIDM5WdbthGfOQZGawnsnZ0jn+3yfcklftCHpDujmwd9fGRNWWFCa\nGd/K/eS527JW0E10AdhKBUYb2bWRQUNlZ+spDK7A6ufD+jXqR9OWr5/GUX+6\nmCXFA6b/6eI1nkUaFVh6cvI0WXjBJauzuSH0QQQnfDzArZe55MDsguw9V+kD\nF2eNQuQh3pd6EuZB+NAi8xBC/zciijo9JTZ2w1U00oQX0gjIVNK6rjamYz/0\nHn/PKbgg9laDGKBrFDA6l1jyc/gD7xPxHPRsxQFbDLnd6mP4bAwGGXU8/63q\nWlgb\r\n=y7oM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEAWiAiL9NMW8fNyKs0Ixjc17gIbNt746i2ikWSfRkTgIgUZ+paBVIbZQ4C2Cu71cdOfFB2duAlCit+CryWGYIGU8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.dc04abe1.0_1583877756799_0.7777113808551257"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.04ccbc88.0","@material/top-app-bar":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfcaa800a510585165a925b6961a7e6316f30f57","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-cnjIkI+2F3E2v4BgRY5sqTl7BmkOG2qqXvG72TrHnF9p26+2Ou2FsFAClkjOha1FeWR+8MlxzZBNgv+Dy3X0dQ==","shasum":"1018348d5ec4d91abd0f59cca3cd83ee20dec9a7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.04ccbc88.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDI+CRA9TVsSAnZWagAAuq8P/0/+aEWuk4FH3fCTs/o8\nuU3PJ6FwzYiQC94PTB0vvVJjQGj3cAxI4hfvsDlmMFgBzxqn+LGmJij1cWx3\nnAfn0fRq31Z9nwS7ph3CxYI4Del6jjW9vwPFW1Vbg9AhorbSw7cH3sS4iWfY\ns2lL7Mbs/I9O2J/kgn0QNDmtW2bJlxMt5gKuP6xjTy8uzEw4FBd41CzZDJ5q\npXHPU+Y4oBdAIemXcYgY6z5HL5HZXmMiiIWUOmKi0t/09St77hOZLvFuBEe9\nfgfEQhMEd2OqMC3W8vG1UkuHQa4lF8BO5wWK6J92IIM00DHpZVGvKvSXKa3Y\nPYnPEoqs8vb818l31Tu9PBErUgOHwikRwRJXLIMXuTqQx+cfYlDLvAkeaRFh\nohVIZNj0DvCBCQt2a+CuJ/nKO3k4lD0r4/vkSdb694b5wxy2y/NdgFnhSkK5\n2+31ZcOOjj8/ffihqV8Vna0pXh3/9StPrY48H7Uy2nvD418tI5HJlKjswFuF\nFDjWJ4Ixd2I/+/5WL4X9XKji/F2lEdllrgMpr8XVlvtstsVYYZuGdqyr8DPQ\n3hWsFEqJW9KtmoHcsLLQGx0obGOJXPO+h/qwiSrPrQY3QIcj3CYn99kHPnnT\nFGo5XcqpKPBqe1v/6wIjtxqyeQfmU62q35u+tfBveuYYAlA3DLAn9+ieJlH4\ntPDT\r\n=DJ0o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFPIS8TOTzzNGmNWetRRO1uBaD7UjHVXD0dHQFVOCi/4AiEAuleptl8y1S1ufIPO99gNZS0Yw6SlryDXixPT2fE/PDA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.04ccbc88.0_1583886910444_0.7027510050325749"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.55338c25.0","@material/top-app-bar":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6251bd82d8c2b37985e6a165d6904180ec7a96e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-DmWzajuwSH2U65v6VlkNRp1BGIlX+14MyXxaM7NJxHqDNZ8CtQ5hFMn6SJuyxYZtfd8izkil8mG11XCydwSe7A==","shasum":"1ccc431520656720d7b25fa34b94805073b6a006","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.55338c25.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIXSCRA9TVsSAnZWagAAvXwP/1MroYI9X9cmTw86KcMA\newimj3hEeZwheQbWpw2zOxjyIbKteL6tBx2Kf6mVtt5CROvkaNWrHizszjAD\n2JNjaZJqdvqK8fuimywkvdVfKXHztRwun6p5xSiXBaekd7X5ef4q/ckuuC9j\nUdeTAOHf9+LrX31dqnHduZGUmqHddK3UvdBJT+u4hh7WfF1miyRkU6geDKSe\nMfhe496XN1h2f1ffi2kKCwKCsWRWQRjw4IjsIwVdhYXtCzTO9iy1SoJLBA+I\nSmdVzesmL+V1qMKrIJUBWDxD2jcPtaJkOLaIz+LPbimQi7sfK+OGX/u3X0O1\n/xarcfmgs0cOIKnRELHfaToHiohf+WNiFkRwq6dcyx3/y1DCnp+2rngKIMGT\nxPU+JJ2iyn17DUlsQT/LdZd21i0z56s8+fkNJfpd/IhZ0ZxA82+/6vESClBU\nrc0AjpBZeI0iXyZWXIskzPM6ew1hrqjOThx+0dBaNUDaQ+MYqcJ8ODgXBZEY\nQWyCctULhUiMZVI0ogVyZzLEGOaG2aDlzCBVX1s4TsDmJbotM1OJaS0B8qmm\nXMxb1GeSHHIZDCYoR1njYcoCEShhI9OmmZAPk6OpnCsWmvB/zD1uti8b8DbU\nigG4nglHnzLXhK98LZ3px33JLC07mCnX3AkrwmNPJP8q/VbFyNvwnvqF7iIh\nSM5c\r\n=+Dc+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCg486hyk2QMh2LufS8UhKE5tDvdNJuN0tSwa1p1qxZxgIhAJGJ1d4LaL629Cmy93+1AOHU1eUl53CC22rb+ti/uWOy"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.55338c25.0_1583908305756_0.14555284061431872"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.b7e388f3.0","@material/top-app-bar":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1ce172712209d5abf28a65e797f46fdddb7ea704","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-WWV9d0JNf6WjuzcQJNtqegs48GDGL1PAB88wnOKL+YFLiUfOGJ7cQHjAy8p6GsevztGQ8LBqsr/E67LLz1onXg==","shasum":"b7d24cc1a444ec0f6d97a2da631ab97b03ca16e1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.b7e388f3.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUfyCRA9TVsSAnZWagAAX2gQAIIb65G4FoxGLRSoLpAB\nBFpBSeyO3lHoMlCVL07+wjKrnUkl9vpmeq1a0fzyAybFup67mXNBStRdH72m\nPVZtUVjnsEGa5MhZBw+qSQbpN88XbJ0gi4aDpVeKOWAIPNzMg65rq+x3Pfna\nUBd5ZvBt2truGcEfRFWXMF7U+xD/RPOhWarpj75oIZYu0Rc5c2NKkpTxr7Vg\nJUBtQ/hINmONcOxIv2mYKvCnkuQa7CGXMvTxcPYXLoTg0YrBfgHv0TOGbWlO\njWQ/5qgK/NaOfaHzCUVQGeCA5aM6Umrta4uEIguzBPF1V68SoAHim10Z3c0U\nUG4yHs3ucorvLhciyD4BT0W015OjnMCFHL/+1a5uBSumsNVzmEFhkBOUW7bf\nkoY5s5PN1cGl0Dgzwo2OFgPGCj55uvIEza4WbQTg15wTtQOdmVrVIXvLfcXk\nirDyuFyPISotKpGr+F1sMBPvMzbA8Kjkbgj+M0gc+kDUPfADx1nyu2F54VBk\nRsXfs44lBvzzpzGGuWxUwSm1TuuCI9gZlvp3ObL56lq92eG7rUZWxOf/7yIs\nQRtjlK92ddiRxvDRQ5YsQvaEj7gee1XhdshFlAUfA2KElGSAP/0k1qfJFNxY\nc5ZBMgqBMJD1lI1nnifSiTzD+Ltzv/OvNL/qTkLgaKxbJ0ESWqMdODUQc3Zd\n0C9G\r\n=TPml\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFF7bSwbhllrAhF5V1yaKq2XBXBK7f0Zv4+YWNjzJt+9AiB2OtaXGSIuovLcXR3Pcw50Su7TINh7kOlMb80kRJb1Nw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.b7e388f3.0_1583958001692_0.9848629443097188"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.b3211481.0","@material/top-app-bar":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b6c73b4ab63cb7701379685a556ece3324d1c22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ufmNZg7S6A8v6ol0yCKh57LaoBxIuZ7zgWmt3xXGjujFIJv9RCHyObA+FlwcVKFBbXRp64nwZeYRfq0TZWY3KA==","shasum":"1de06c824d65b6026d37444826943e6ec24bb8ea","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.b3211481.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUjuCRA9TVsSAnZWagAASrAQAJtu5pfuaNoaL/thNETr\nL9UgveUGGRJy/u/ZupVTbWf2DIyyLWxQC9+MLqWOZJnFT5WDXsDhrkhckWSk\n2nAHJiviom93gPkWtQQ8J0fUPG0jYZp9dUTrgFg9703V579gS+4Qfuse4IA7\nF+peSncWSi+MEMLHTxatI99CsDk5dkSSLKwFbk6GSjIZHDtijmTMorw2Gjia\nAE+Qx9nvb4gqVIi4dSb8jFMg1YrY68yFWkIhk2z6aA2VbQuugTYu7y/GE55K\nxXKaHXojMXkc8Tkj+9PF63SeBLxWudfoH0RegCLHt4t2rYgwYDID91pGA0IH\nNGIgfeNSZF3XsRWhHL044HPYoiQsJ6umzIYAfAwZ81cs2z8KqkMzikSayJc2\nnA9/qH/u0fFE5R+NR8WuRcDt9ZDmOFO0cfchCk/Bj229L2+hReJGmasYyiDw\nFY2IVd0Ioray3ufZkH8YVIVAJJ/y2pi3ydopM+UJzgzQehuCV6mNWECLdoLS\nXRKUHRsuOEulYs2p0t0rGOa/IIxligjWVXCxzXQjlCV9EFE05jSVjRIsoA5h\nIQD2TAvVgAVP1wvTA+uPfOKmwhICwJkpQYZpr4umcTgFJ3IfYEbkdEijYwfF\n042GaXWbgRbpXczecfkEESH7Pa/6fH2SpiX4RXg8U1remFQqjv13Uzct7y5D\nYo+y\r\n=I8Ve\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEEKoDpUnbc1JQBgD9tQ+L25bPU+gfbvc09PlffSFrotAiEA2jNdqewOwbx6FtuyC6Itdboj6i40WiBBPZ4mJ5Ag94c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.b3211481.0_1583958253727_0.4523496389678956"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.0b5c7f23.0","@material/top-app-bar":"=6.0.0-canary.d5808057f.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c142ca8fe1db14da6fd164a99ca71277489f9b16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-U90fZlzvAn8ZPW8YTdfylGuv19aXQuE9S5vYJK6/YItaQESyMXaHpuZgQNf4T0NWA00vLzHsVgOVGMlXz15++g==","shasum":"99c260570f2824f5ece937f626617bebce48b979","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.0b5c7f23.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV4ACRA9TVsSAnZWagAA/sIP/3q4JN3QTEK6DnD/rZzN\n7SWPMf0U4E2rI1EgLUU3GAY/0qV1LJFCxI1biR5A1b2jvPn0gZx9BUGuppZX\nBE3zjWCE0o54A1kSiQYYCZ0Sq+EO0yqPt7Zz776ezEYzlUNj2pCHs7lCXJdj\n6ZqofggFle+En4wSn0tPsVk67w2bSgP8xh7nOa6ZaUZ0E1eeQmuzrzYARQNB\n+nsroOyHVTA2uyZHga8xkerCzsjKVk2lCtZKeU9TX1hstoKXUIsFIdrZVT5P\nnTimBQulk2AaIwD1fJuuG6C4x671QuFgfwE22QSb+zafiugIAF5GkBlKggWg\nYQ2TBRjn5uFCkqcaFkJdgtygPU9jmja0pLUYJ5LrfvsnBzkmeEXjqki0TzkE\ni6fljgv+ku+f8nojjYuXZx8wsEstL782Ak0ig8lJZziTEYNZGFgAgAVJGbTI\n8Uik34i4eWNLt07HS07TOoGLe35GM1i2H5klD+EcOWirj87AEI6BVHzGQkgy\nsR3/ozQAi9138/YdZpdr75FRvj1w7WVIrShpi95ImLwoUrNrIfL3FYLcl0Yr\nLpXaMSkHPCoKbCi0TqFH2d6DovbEKJkvQv442MxoKOx4xZkN77XtT1pN96OK\n1kBRkiY8+fDHFuoJrks57lw1O+PZnNkwi/1mfZtpE1A84v/c3flWiFvP22SH\n5Nbb\r\n=2KfF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqqHnzNsNaS9G8RyIgBLRTMA1Q1/NfdCzhJ1dvMRoTUwIgCkClZ8Qh5ootVoruh9+pWoq3nDtIi9Cvdh17jRyFRZQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.0b5c7f23.0_1583963647902_0.29759321135290784"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.6c0f0b27.0","@material/top-app-bar":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"642e3027b591cf821c0ef159a9bd31f56677de91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-FgCGCZ9A3gfNyN8AsAnDrrCoSuyoe70ZyHGcf4Az46K7d+YMMhlL3/fCiOU7vSb5tDxhh/ZopnOF4CDc9vE0Ng==","shasum":"24fc07425b5f4682c244fb1fe902e2a352c38515","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.6c0f0b27.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqboCRA9TVsSAnZWagAA6GEP/0OEMrbo+YNX+hKCbCpK\njQOb9lQQHeWznesovq/MxLr/SO3CpXMKdGrftodsWgmhFVYw5VuHwZBkemkd\n8x8LdjXtvQF4Xe4EIgl4rrGExuUdFYt37jjpmwTQHaQiQa6mkqRBRBUqH2Gh\ncGwGeIJd/JD5Yuu8sTg4sATaHnLDyDPYFO0JPIvbdv4ZW07xbTUxvm7Nvi5g\nSL90ekv+7GBI5iGw0ljjnZtNoAnwpO3/dwd3ynMBIuAzKrtKjWeBsud5Ewoa\niYPat6rTYFMY7tfJPJ2KcatFGfkw+iSETHrFvhGwJG8+bbkhm/VMNwatFv79\nlvBf++xu4M4rF6WcS9YeED4163A+pTiHvGi0y55o+O3o9v/PqEms0Gw8n8BX\n5RmulT1lWUFGiVU3Chi8VoEHUlF5FDGJ27h2HE6q38psM3OZOa430EGLD+zq\nG1EQU3Duwc+Lu4ro7lW4Jv5wZStBMHhkzGhlZZz7znlgEqPsx/HXEVX1/eBP\noUj3ariYpLegJ91qTCgcqirD8UJMt/8FGjwLcgIBmDh8CwX6MdkMma4c+yo/\nsV2jS6mGdDH5juPzEYhhswL+Lz0ipz8BBqK0y1RyYbRtrRhZsVtFe8PtyKUP\nU5zL43ljxiZo4Un/mZ95VUkXma4q8JZ9bFP+gFOCwYyOx3tJb/sl5BsvwMQe\nr+Lr\r\n=GpRF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDWinl4WaKNNzlLxGf05Or8PYXzxiwdtmaTkkxlr3YqVAiEAxocwddWVRuFW548iIzgzjg49iCQJ1Hu3dKhBSYCZ00w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.6c0f0b27.0_1584047847936_0.21863741508703516"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.b6c53425.0","@material/top-app-bar":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"21e9310c19b1139fef9125fef8610235d0ef0e4b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-efEftOfgJC/f11AVJ03NMxkoabQ1AaA2L3VcWGgz+L2FI5gOrlyB20SDHg2biv4Xiq7tFdJZlMM4nZdCrPY6dQ==","shasum":"d16a147d234bd5c7de57743ac915c1b92048523f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.b6c53425.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7sKCRA9TVsSAnZWagAA80sP/j1+8V6kpudp1HPZGLo0\nNkaVlYHstoqvXPUvvJ5n1Ptzxl4t2RZJ7AP2RS0ibzeFfgk7ivU4dGZYiGZF\ndGDjrqPk8uYPB4jQKOzLrHLMlfChpY3jXBg1ed+2xJZ3jzR78mQ+md4qs9Tb\niBSOJB9b8KQ3swBJO4G5TFZF1KMZs7d4+1TLgP1e/M8gjZzuFkiU/+nJ1PBc\nTkvJD22V55ulXFgalrTWY7shhlnGIptBXnUDYdDT3rrhmlJKvko2JYyd1fHr\n5zi/FpG8ADR9iDOSnCxBHLNgsf5y2Q323aMqP+h364ipk5Sp4pGHYtCt1M9Y\n19HeLaI5sAP+rWbZ5w154HmKQCpi2HcXD3PyPD2iI1uvkje2bQSH5EXFjqwo\nDmFgMmOE9jXQQayNlrJucUTppsUN6Gs5QC82FXvYGScaQJ6NiQH+bx9xEuww\nfBo2bJzzhwTbnNLzoLkdjiWOTG3fO85oDe58wVId5yJpRbOr3o4cUG2fnSNK\n0Je01NEfE7tRD1shADJJPxNHtCe9JHCjGqlbaK6ZsZbTCH9PK+iR9B6EJVrY\n7uLmnTs347IA1JDTBJo8reWLCFwUtioHJJvCtVNbMDZkYjAxqsb9KKBNEbGX\nRvVl0u+HT8tmSi1i9IOto7I6Ls8FwqfMXJVgMrVIMG0VB3Y5yKYsj68+qXFK\nLRFg\r\n=VxSK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBTZy+p3jGH975wBDirg9NpfoAtY5dPfMqNB3hM0lstJAiEA4X++EesPV3d68tYJT0N2N8lKJGuJUge/f3rP+m50VD8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.b6c53425.0_1584118537976_0.6547840216984555"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.306cabed.0","@material/top-app-bar":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b07db227ed0e98a8a55068a9460e3969aa14b37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-GG05qkBzhLEkmHHeovjQUGqt5Vj5iBIve6QOZaHKX79YvzGrWFl0Kut21BHmnM6exMHwPXw/rpV2/oPPVpnlew==","shasum":"ddcf9c0bde30060062a4048070e2e014ebbddb98","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.306cabed.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT6GCRA9TVsSAnZWagAAdM8P/3Lb+hYuZUH5v4iGiz6G\nNeU1asVIe8+NXOxNGULVcY2IDYKXMB1b8dthvuzubJjWFHjZLRue1prcz3fb\nK5uPY5hpFEwsVE0QP53N9BN/KdZa+af4qvKrIu3F5KNLfNYnnPgY5RM/6bJ5\nh0LAnQkrfhj3d3cLRE3+do94DOxtLHY8fUPY4cZukcaqMtyvFW1tB/QutAMb\n+usQN/jIt7OGmpaLCYlcUxkQQuW8N0PKjTyiWQJqPz8XyZLyo0FdgpDBJnW5\nPo+rsRadmBckLEABY7k78/Z9oITQKv2GZ4BLgU2buptURm2uvLGXSH3QIGMA\ngJ1aIYXP1yVI7OfZ+fRsf/876K0R1JzaFYpfXvGlYy0kU0bVhnPi2e94FuEN\nwx5DFGqWmnNn/9PHO5E65IG8MlYv2v/M4FbtXXHG67OfV3PLfP14ouxhbj/J\nBfSrWAeJeS+Gcov6YsXeXgeWUPtvzBVgEOB3oooMBtsgApfW2Z1/SnCFGwyy\neOAf0ITFvfuKbAb4WJVEkgBDN7SidkhTiVGay0k8DkGv73Y3q4g75r7iSE+F\n0FKWdEJ9sBd2vzx9SLVOSpViqM1y+sMqVBp5XZnNmkGUVRSiHxLnIH0/Xzeg\nQMFw/UIyLmyV5ig2DJs+bBQxw1jxlK3pCYGw2/z2rTPYw6TAs1li9S18B3/B\nW0Nr\r\n=5A9P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBCFIhfWr8GcMce1AS5o8YPOcquzkJJhA3dHQj4gOpfSAiEAs5PJ4HN0YYisde0MrJe0miT3UlXe42RQrntScYr9Mm8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.306cabed.0_1584479878442_0.5530314604337454"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.4e250cbc.0","@material/top-app-bar":"=6.0.0-canary.776291ef0.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8e0b10a13a5b20d13409bc4bec6f11a4ff757663","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-/xBiOKuoHkg834G1KmNylG0AonKbhKcV/P1raMDgGRcgB88dCTP523C+yZpMblazv2oP5BB0V1FJ7Qmz5XTuPw==","shasum":"0ec1e5647227f533f9c290dfe5d5e2ba7e6c00cd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.4e250cbc.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT/5CRA9TVsSAnZWagAAUIMP/jNE/H1ZFH/rzbz8pBLr\ncLFXE5+lJMY/ZGnz8gm8xVa9zkX+dBdtdUal0M8tk7n43SgsZNJ2aQEqxL8d\nyqo+gPWDMxeK7vt8U2CELzOyMqsvAi5DaCbjlK1om0ZVAcvlHMVlX95HlBoY\nELuIIEGNThJVkhFz3JTp7OHBiwmnykaYpJgO+b959CaP8suiqh7RZ3bXFrX0\nawomWqY7waNQbA0m6c5aP8lG8ouy3c4iadekDWT1SQu8pD/tFB5yS5p6KXKp\n+vqLglgvzs5n41WcVrwiHYcdPc961nA6BKEmGA72Zua4C4p/M1Sf34l2mGqk\nCcImEWLBctcxDKRyKzP1kaBocbv6vJs63radZqYLTArVr3ogO9+6rdzANyLr\nKsQ3QvGIBRbQA28aXpE7bNwmPcHefeoM3eQ4cojC2j1ghTiWAlB/A0m1y8tX\n4GVnuPUaiLpzgGP6WrAxqad5FY5KVvktsnevVnGPgVXCEg6Lx182CHwbOx48\np/VaaCiUktP1IsRm5XwKWEBm9pmPmtZ39OSPC5TNvdb4BmbVCP1S6ti3r2Lp\nqb18J9cipcYA6dgWVqJ0qcWaffvFCBwI65SzH7edHjl8OtYWQt6HNU6uwoK6\nN2K5taRlNqmxZm9SED2Vwq7pnkV3XRfU/gEVOVGvUlqasq3+dU+0KWRGd+Td\n13L9\r\n=O8n4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHropJN487eByyPyjAQ7brjGmp2ZLfS3qQIVDLahgB/UAiEA5esCPly/Z4GFtA5iOAe5UM6VTCwfDeZfUFf45ex90FE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.4e250cbc.0_1584480249039_0.7358389301309556"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.ff82d9ec.0","@material/top-app-bar":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0af402cd2ff3748cfa5f7956ad2211ec9271c83e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-qQ/Ek/isuRz54CsTXJWBsBTq2ZxnISAS7rnLRPBa9p8JwdeD1bvmfUcgvHQ3NB41jY5Io9/nF+69eU0A94+sfQ==","shasum":"8135820cc65e2689b453f9c5a47e532a3f1fabcb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.ff82d9ec.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmZNCRA9TVsSAnZWagAAcfgP/2o4qb5DBQnC/KYd5RYH\n+zpoNugevA0AlTNpm03m5Emd/MjJdd9tBj3biWupMH1mCByapId2I4igVbB5\nquwo3uYFBsOdpCSQCM54xuulloKn1PqAmYMtz3xHPiybE+LGcx+M7grUagMk\nvxtnrCk4c4kWfOXPKzoE3Av5x3SJpaoIKP9jrXi9LWk1cm1hfX+/jy2EPefj\nFAgr500CbfqAEUEBcVy2VVvNM/YtYbie/LL4HGkZ1ryzrgzda9I9X3nWAs3N\nzgJUvqCQDohempSJ/MwUWpx3zUMGZuLhRdGipqDNT6UkWxcEn8Ju8jjEdYR+\nAK2B03OE+LwwqJgXD3mN8oKJtkqPXd1S9lTZe+RUdRFSh4JoQO0vad8vJdEx\nhR4lKoVgQkZFBqhqk8NapPXlI5trUAhPXSkQidOLHRGUE/xXECZO8/5Jnu4G\n3YOHtgzF306wMN4GDfkKQAuDRJIkx9mFT2J7P57crwH4WrproGyKwOLGMKFR\nnw1woFFM2UfO6d3XW9SnXYP9aOPRkzPbcnB8kvSrElnRlySafN3ByfSPxPyT\nYEAuLVuGXFM65NavsuXPAJLgrfAaNpdmb13ujmDGO23zPjHvrjoodBw6NX5o\nLZsO1w/iw/jqN1h6eRL8ziEkn7RPrI2NjugQ40P+w4uOz0msQmq1ODr+J7Dc\nxFGv\r\n=wvzb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIGFiyQ1njI7PRG1xMl0a3cMP7ixmGnJQkcXkJ/FfOggIhAOpsCtSg1gwez/BkL07ozin3xBFT3LxXnc/TNe4mz0tg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.ff82d9ec.0_1584555596957_0.26214055811021564"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.f50f48ef.0","@material/top-app-bar":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0c4d2eecbe04ec4e08549650e593ff154b7d7e84","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-owN5xwrAjIka1gr1QruN1z2KLTMVN8UyrXADLPk6riclkSCBKf2YqXg1rogH/xO/3oVPyRmTqaJLVDz9T9JWBQ==","shasum":"02d9188483583c4cc384b583e15a1011c02530f9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.f50f48ef.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8AqCRA9TVsSAnZWagAA708P/1uGbEzqvnl/oUFVXgms\n4lgho/PV8Be21AeyVx2ecD+787lSVUhYCebp5V98iaQ3PDE1FhRLe4vdbU0z\nAcTF1MwsDjuds/eYbnvCKIn14R+qFcHkD3vt55a2NNdt8J3p/0fIL7Nluxhz\nDyaRJ3LIRnA857eigyM+6/vm+d1qgB3OYH55bvv84JZLgUXPnBdIKn76qAem\nh/6hlTA9JKSkpkj53KDETXpmprNIWMyFPFWpflg0ZrjTtvz6KCQ+Ezv3iwqx\n2E5FdhX1f1CnDMo03JaGP2BDlmKMpXh8uxH59/k8BAKyjw10BEa75gvLEM+Y\n2EAkZoG1unGbE+iiOus8VT/nbDAwqzDc7cV0tE2+g8yiqhdlo4lMqjI5lmMR\n4b9GYj8kR9/kLxzklXVAnMABtDl2X8pyWZooUQ7xgxs+qWRlZZ3HsRYJ+q4T\n9/OfT8fpdKEkvSzFWS1JnzyWTiAsTHcXikWQ9wOcHebJbSZmHEU5nK99PxDz\nMmEdr0FRz395UgoyMVqiEzASVGsFV0mievmwtOi3fYIc5pjm5vVcowausThe\nidFEJ+NwE1Z+W19s3fgt4K8O69Z+s4sZAUXPkMDlzIpVZzK8cecrLEWps2Io\nmKcSN3QPuoVhpZp+qjpeNbp9+qLW6rwkCzKvMYdvQtMKeivaaTkiGmrPFPf1\nxR2B\r\n=gDt9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGmjIKyKCPAQlXUo3zDnjEdkH6DFhqHQjJICeBW3HhyYAiEArQ/tkqRd2yTiNRSFn6I0QMsj6OUwco4UX3HJVZlZ918="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.f50f48ef.0_1584644137934_0.45068186199681226"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.14.0-canary.134cf877.0","@material/top-app-bar":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c237581285beb5a84c39a5ea15dc95e9a865e057","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-pQ3ZZmQJTxTOezxDXHGkiVCDHEmA2Mh3ZwU34d8VMX/6AUnbPggxyvacAaftu+pYiQR111X12jeWu8krU9D7lQ==","shasum":"630af902e2b6bf9bc676ff6a91ca7f1be142adee","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0-canary.134cf877.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9iDCRA9TVsSAnZWagAA+KgP/0d3yocqBqvxYTRVtfd8\nRhonRdu2OMG68pAu/PK7JbrR/exsTMCVG9XYfzNjOLljt+v7soVovSMskNcc\n0gdbMW6cYJWk0NHYRMvOHMJCHM1PAuK8zaVtfEKcDk3YgVnIKuntOiRp1FIg\nSzQUbb07989C7u7PXLoXwpE0WF4frnTOb1AYrlpTUcCpZUEiCZzy3JHr2iBV\nQZNUBnaqo293G7szW2CGA0UzECGG42Zc7wk6Dso3KML/znMnZ02n+Rfuqh4N\nOR+Gd5oOIIZEVXuleP7NX8Ttz7vC7rPd+mGaZbPNnJ4HntsBFPVgGWOscmJV\n43QN7xDQ51tfcStj2hcFbe3uA4K3WYGLCJa//t1IHz2n5rtG04FvrwthmAjF\nXEfig8xJw3GtMSiNUu12HJIBw4d9EBsflV/nRdSdoNswnfeoSu4pNm3dppNL\nC2NFfTAWo/88WJaE7pF6W89o1IHq1UflG7uQmCKhbgZzwN0wU1Fgu3j6J8Kg\nzsfinXD7axpQlqAQHAjeOHU7kJUeK5cAYBlzj7UMxa0GVcVKYD9s03gcVJxX\n9zhrkuS1MaluxV2ofVvB+SA9KcX+xSVCd9mYPXHJ47DSk+xJWLDiMB8Ohqfk\nZdhE7CRWIIY4GiULVEzifERK4MjNl5dp8vrl6y9OrtwCCPVt1um3SSxk2hqd\n/04j\r\n=Dy4T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBwYQcMIb2N4EtQjTvUSI6Ww1e0LnsVrccaWmj4TgJ/iAiEA1wV6RncKu+2J1b+XpPuI+/Kn84twunaLtdRlNcxGdZ0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.14.0-canary.134cf877.0_1584650371558_0.3431942333654634"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"^0.14.0","@material/top-app-bar":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","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-fixed@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-iH770nfRN6yjamjkXrdOY36vw0AdJb1hUYtHV51/ELJk4yq1EjJK9qveMqIUZeC8KEdhLbJXbdhsOUzSAkiFWg==","shasum":"62e15fa0d1a98220d85f6cb7b8cd611054ba211a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.0.tgz","fileCount":11,"unpackedSize":29358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+QNCRA9TVsSAnZWagAAbikP/iscDoJlOcmPYfw5bh/t\n0o46vOo54VZPOtQege7kMTpfVdUO9HQMTN5X8HF2F3aXXZ8htW5ykaBy9fqn\n7vvzRsNYElNuCVXDEUcwjq2HbvECBLvDrygqmetHZ8EK+WWQtarbjrP270DN\nuCumOLhgoA4ynrPEJQmCZMgtnbKB7wJXfhFFs+wNLElXkC62Q7K7ZRI/i979\nCWBL/KvN/xeqoPxgYC8yaFhpHkzSrNXU3vS3L33O9cl/gq3z/aLKtaLans8y\nmrz6LQZIdBsnTvxcFQoOlxai0LGJXVne4rg/bseLV321yVxBhG1kxzEtxPMO\n615T7twbN3IvCKLOfH6SW4v2HW5vSh+0MBiou+mlN3V0wggwWEbanJtFQjxJ\n1brxt+M/g3Mr2fCp9x1vz4cikjNYABE2vkHc4/3YC5kM8gdd88Cr8h6yOF8k\nHyAQ3RUSlpa/HE8WlsgQUxc2g4K1Yl5sJi0Wy9wPIkzRQkHoLX4fKgvD0iV/\nw5wXOmEZAkXBpSHo3Gsznq8aHhwgAE07FWQUoN9MVWEIH8lbHB9n015Kl6DQ\nb7cqvwhRYXBsgYlGbvNC5o8aAYkjFv6meBRuns/RvDI6y4Eqabe4JR38b0/+\nYc0fKm66Wctgbb2lStcdg7OlV/7ZU1ehiaDHht7VDTVPbp4Ntlz0SOwAZ9ld\nnO+7\r\n=N0ro\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID00q1+7hlIOaEKwQMkhdsIoGpEBq9ONLp+DfegXTxo/AiEAkwa5npDuMaxckhathDeBhaILwmjRvmO1f+vWhU1S+M0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-fixed_0.14.0_1584653325114_0.6696025528763183"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.2c1a4913.0","@material/top-app-bar":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d9a4fb2b0ac4979d966b16e203b2dd0f388554f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8m4v+rYN62lP1Xey9z+kTCmvT0wPZVek9yP8sdcI2faxlYakOO/GNGHSWGWX9BlSyxznbaEP6bVROWccjoR4OQ==","shasum":"6001bdf5b178c31b31240c0a6873e3b38ada9af0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.2c1a4913.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/m0CRA9TVsSAnZWagAAc34P/3SKjFDdyTXNjyqLmaim\n/aQo4lEYQE9q6IkrN8KkzX8XRO6k45MbhUfM1jECZUUrDsO4MuNU1Zr6e9wP\nMIWG5b1MIKfPgiUpPMF1ibtxO6MA6WYTfBpCfTe4g0jfP6C/ZyOXQ3iq624F\nEMj+c+U2elJTfYiZKa0JOEcwDxGP9/Yu7UCmgGpZeaFu6W+EdZJGx5x828eq\n9OeSSstdCwscmO/Pb8KttsIGqBq5uPYLsEJBlY1NYiiefhr/pf1Nm3M+lzLm\nzQfarKy1hkZj/N/HOLhC5wvrXBDj3I9CCB7nfBP46A1gm2z7gZQKJWnvVN2g\ntF2vrSRMs4HWeVBBRUhrzUoqJHeoEFF4urI88adtW8N6tU1cvolKLkvGK643\nWYR0DfLvFaijdAaVeVGI7lfrEuxW0fdC1fZ6QHUxFzESN2xIMWb1KDWaavKG\nmQHbiQbyS8QNpdHHBw6Pgv70w5gJYe6JNV2niVAN+jRfYnJ92SxCbkCDyhHY\nwOr6fG+8DLmqUflLLdsoNjM14hbM+a1oswL4NWo+JwpwIvHLH24s78mEL7uw\nRpq0vt38dShVD2dnhhYszWWfw7FEtY9ueNH0YzzzcZh4Lwf9MEJe7Rx7UoSd\nxWKQFLfhypB5q/a9YRq1Gev9CBC0LPqkOe0VlsfcQxK3r90Zr6ZJIGszWPXQ\nu8v8\r\n=zVaB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHwkrQNTXoOk2/9HQUGucQDR0inyzT9Ur+0zK3UePY9ZAiEAwRDdhVpWBiLaRQN434BDfuPSx5/C3ForyKu4/VgOOM8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.2c1a4913.0_1584658868008_0.888231561664869"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.3a6e481a.0","@material/top-app-bar":"=6.0.0-canary.cafe18860.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0d89a3406dea7d2d2540aaeb339072cc01d18e2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hvDg4MwFTbPMlaeNIabJdDwau13HAuEE44q40Veu9g3JiY+9axRmGQvVryVX/M4sO8jikhn0xWl5uzZCF1O5FA==","shasum":"476c0a55022cd244bba93231d2e6e1395933bd51","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.3a6e481a.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQfECRA9TVsSAnZWagAAkssP/1NwIaIj09gBfcyM4dUy\nk+zWvmQOQZ84h8OCxtw1i1b4XjfG5ogtMV17AFjvNXJqyH/PMwEu5Dr1ohUw\nm0i9gKyHa/YXMURuhBFSFoDmuoqSupk9/TPbEhVtD5ZDpxn0NyhIcm3FPLyr\nCfxthNucKhWdW3srxNj61NuxEJAj6GBjIIEMpliTy0W2YRDvDjUc26gNd/lw\ngOB3zly2rRMIgdmEKbX8c4KcyLi2f2I4nqsd6s9D85t+zelqbIqmSas8Hvjd\nVaHlMbXmZgiiNGUWqNntxMgwwAI+hDYMucAt09R5fteqAyb10HaWYQ4h9Iio\nu86hs+vpBNOV6dcz+B1cjlKLhLeBvpGX5qyl9m22ZsprE/jO2TXQqdEF1Ga7\nnrD8rZqIvlv41pasOGQCrWvs6w38C8+0hlPVS6PrHBP2Lfq4E8vhx3zhyF9J\nT04Eyu15veI2kPvKM4wcPaBgi4ei9I38aJ4jZ81NuXH3+khRNunonVOwmEm2\nXqIfXqpJ4Lo6RTxXPnyEStH90eFpc1iv/SSbxMdcPITXYVpprcRA1vJUO/Ss\n1nTAhrbb9O5k+T4Sf6nJ5YlwJUkC8Y6VvqAtoO0LBwYgYGdJa+iroAVyA3Uz\nTnu3drxLwt85Tprcyb6Emd49jFMfiAtzArJAYL6UzW2T1oXNmS4eP6wq0NIN\ni15Z\r\n=MK9U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDweYOjEMwJd6goPPiN8hcpGpqAdcWkEpQWRHLVCQ4uFwIgUHFqqvRuH0axMvYEsOKrGBIcViJuVZQMjF3NtF32vYg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.3a6e481a.0_1584728004021_0.12621981176987096"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.603d6eb3.0","@material/top-app-bar":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c12dabbae50536d5adf2b5a785d4a5009e53208f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-POa1OgY33vdRLJKt9eqhHwmRE2+WRYECSej/n/7rGyzCA3P2874cugBJ7XrGCot3dTZHt/FvWW526JL52Qo4xA==","shasum":"5e8b5562e66751641c4e028b6d93387c5a14cb18","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.603d6eb3.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTdJCRA9TVsSAnZWagAAe+4P/01QCPRUjZrqqd9sk6hl\n0k/TDTJlrEHzgqBwphDKuF4qltFjuOyFX5aY/tvIeE+UtR0dtU+JB3kbUHr+\n/MueKQyzYxi52HT19HyL29CIRPt5+S6oLlfpz4FdpLEoXH65ZRELAipXNPFp\nv9fv4s6iWpHurPYrLp22l39gIOfdXuBZbhWz2Ae6IG9H0cpi/iegN+CdOyIW\nSHaUd0Y3nNv9Sp0AhAndqJJhyIca/GFGwQ53y3Crhs1B8vG24qKUETn98d7b\n1Ip9vLIqwlvXd9Oun1HYBcwZxCs1Xj7K0aHhPaCaA2un7EEXKCKf005g7s/j\nChsCPyqWWUdKN3fsDQ8Ve4UYTyMs9BnEI8acZzCrsyXw1AjnhQHQBs6F0x4F\nsjt0WmEAJuyepPB4KErw/wgRZd88xT48zZQfG4apGwlOTXiiUZukAaP9YxBJ\ngIQPUyOJFgQV2n88n5wRiiw62vraUk7biAhEZxlnIYVG3jKcYgPoPyH+4cUN\nACgr36okXJbg/9zqceCM3SkfqL9AoMoPnM2Vrb3pkmuaGHp0/SzxP8s7/33T\nqGtd7oMDZff0I70K4XMS7MyQz1UBVEHVf8IRp4imcNEUIMJI7dog3gb5LvIh\n0eBtJt+Uzd/p0X+L7OnSZpKz5rMditBqOoXgv20oYqRk/WjrZTcEGsMEmkD5\ng5eU\r\n=u3LC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCf+MF3/7mZRdpGIEM6F5qZJrEThlWptL1UJWJUYy2kygIhAPTZeSR2CR42V9IBbg928bp5GM19PkadtllYxou1FxYM"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.603d6eb3.0_1584740168997_0.8341534814650826"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.05c6a93c.0","@material/top-app-bar":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"62ce85b6b0e7c20ae9938ba7b42af970a40f1f00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-p/8zSjp8RYeSEpChb3LQcT9LaIcj51t3C8p51yWG4S1E+fO+nv39g4/YkjRds+aP04IHaFwqDe01CYsvddSNjw==","shasum":"488d131139f01e28da63c880cc179bded01cbfbe","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.05c6a93c.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOWbCRA9TVsSAnZWagAAbloP+gL+e3TlBNiHUi0yt3T4\ntSF9b6sXtgaiku8P0yIA2OgAsDe9zlxtcIObijixlVxJKFPayaOWNeL03Gsf\nPp0zJ+iV6T7qO6SA0gI1JgaE9Af3gbgbbeO+sDtES8ypnGTEvCNTILx8rodo\n5sqk1RUZC6o04eQtqlOLiPYe6n8aCRBE9OtwJfvU3Vphtx5OWi+YNX5qm5DM\n2rKbjGxYhrjwI7Mm/ek7ayq0gEuLXODR1wNcP4O7ev2CBjw36Lbu7GxtLaUN\nu0+mL/4t7eIISEYVH6zVa/CcvbU75cVA6Icrpc23F6eh7iCiSJeRWnibDQAX\n2p4AXMdifp7yhZDH/tz12Niu2wljsghemQfDiG12JqouyKATd1I56aS12Q3s\naX+5jWv3q/qv9qt4sYWPPgTNlxxiUqecKMWilG1lcTJezdwR8rdMb5FnG9fS\n8T4NiefsrgJt1lM6hGsWghfA+Y9yPtmYwAPlMrpt5BOazeVTuDGxT5nUCoSY\nQgpFtwIyCy/8CqWQyWehh+PcDaih025se9z1+BmVr9o+C3rIF2LyU2KiOL9E\njYSNxZK2ljt4ldknKjBwZnFO4KQvMrz+BPG/ROwx1gZUiv4Woa6cO8aWv7Hl\nHLSDyxim/Fb7h9IFIFU2kTrIB0X1sUnHqsZJg85JEmC+y4Xhlk7CKUfLFcKv\nNkqi\r\n=Sslv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCp41QYP8J4CImF3DiNGfwHtMZJObO6gYiY4SM4EJtiggIgPKP4IqUO57yJh8JHUt0WIF03Kf3XAulMofC1jP+b0ro="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.05c6a93c.0_1584981403479_0.931166001079933"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"^0.14.1","@material/top-app-bar":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","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-fixed@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-WKxs6ajW1+ZgtTkFVL0s3w5PvBDMkW1OXDjku9xrt+b3GrQOV7UXIE3LawboPBMuDIBUbq4Kc55TJyAWNmIVdQ==","shasum":"71942a2e27ee487028bdf19f8890278b5997d8ea","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.14.1.tgz","fileCount":23,"unpackedSize":70878,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePiVCRA9TVsSAnZWagAASLQQAIF28W/aOzDqE84EmZWr\nitntcs1lYiRhR5CVAt0+rhuZp6BMk8EbKDqccvvW3Hq9cKbvlhfSPhUEB9Kc\n6OP7ogE2DauNoQXJg/BYy4RvAWn3uI3dVwRQ3GO6uQEqdzxrZzGr8xbD8WjM\nxhoo0fYWBZ46YMcvVa/JiYCnUJOtUnRDSE4hOBKytDDPT5QLE4azqR5XjfTE\n8n13RyMEQwc/vr1ExBapCN8c7p6T+nrE6CaKg5R3QfCBNQjiGQUrPbLX3bk4\nRWyUqpfp94yB/s3gXuQVfD8dm2w+eksNw6oYqMV7jUFoEmToFc3kGlMGthzm\nbUmBaGoR4kDWa6PPFivE2FIwwCJJXio2q9LGfRkODEJcinif966g1hlgjwV0\n6qqvp/6NHSYYGfg+DNmis/TLem7xsVOJmaBVoL7f1zWvcife6Po+p39crIKi\nMmNxNvTA6wsU0uRDHA2V4p2hljve42kdWUWisQ7QW0ZVhN2LBJ41IVXE7y7u\n3DFl36d9PEmDLm2DFKtyMPKkJj17xfeZ8FcJzXHm0Ri8DQ8cMbJXnrbAf5kb\nKmbT0MaPpD6a1Yr7b4FYnyjoYZcNZ4PTUL4duJJy79RKwh/1UBfo+Ksxcw2o\ndWvbh8Ilz/GxBMMfCGoU8xtRetm8ZCubGVfAYHKFSZmaNlfiJtHYAsA/3k1f\nCUyX\r\n=y0eI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtN3stEdxK9tkUg4lgqnfVAxfX/SWdTLd6fqCdeIvvbwIhAOXoB00POSxB/SRLRPHhsUxbSEMY0Yqba5YtnYU9qtcZ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-fixed_0.14.1_1584986260698_0.5976009745032562"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.4e6be3f4.0","@material/top-app-bar":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1512aaf308db7992eea7201d4af81bf1e616d5d8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hprIztBe0Jxv8hVCryEkzovNX2I45DU2/C+pqRtsmsz8fc49KP1yfToDPm7QfZJLW+lXyauKOQTNhLg1+c7VYA==","shasum":"50a1a957322bb91319c8691b68e0ef203e75287c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.4e6be3f4.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenSbCRA9TVsSAnZWagAAzN8QAJwljjOdNBW4gSWi2V+H\nSUtr/uUjj81BQGzrsh4Z0irMiEq5Vx2FXj5ESxZ7LCYTD1r8XLmGvG82VZxn\ny55esY73TtfQuSmntz9IuIODnHPKrtE3xJOuVccsfufUwtst2hLbvJVdiGDA\nTTZqbFnLad/Sz9hBb7JGTvGIPVBQTuqCAxR2Idsh1io9a48VynJrVNzRpDzM\ngWObBNh9NeHsm4ia3x3/Wz6ZNEutXT5NNwhXGn2dmTQZT8kg4iyHcDl2OoWs\nJDNYyaw4vflbwXvCTVT3JN7RZY/GHF/tUQzhPZGoGyosUIGW/GGc7WL9fKYN\nRhABXHhnL7llVE4LBlc/mCB2YwMI3z364KjMQu/CuyNQNZ38kghm4bZIRh60\n86hnSE9gacaez1ll1EDQIrmsVp/MD/FHGTubrgNbR1K6N5JFRsrhC7H9lF0j\nJyLeaJSMbl4VRrnWcmezLdX4pB403a+bWFgJMaO3+jAYVb7voqwCSeZHUBlg\noOvHEyOXg2AILvC6vmOzgEoe4dRQ4sbR/72Mv1KCINb7UcxKxIOQZ4gyIxPf\nfh+tl6a/ThAigShTL/wcLWyU9A+5g853w0zBvW0YbKa0TMrOfZGGNWS6mt2v\ngBdBQwbmq6v8ksWcxpuGXkbRBbMtJe6CH2rs0vqphR3wch5Bl+cDPC+Yj0GP\n+YJD\r\n=Aoih\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBoliEa3YAwzdP4oyjH2jUBhBm5hH2thS1pn61uMjxeTAiEAhNYB5/IXttQtbazjWkquyvVPUfGonHc5309yaT42ptQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.4e6be3f4.0_1585083547405_0.7905175082351241"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.c29a683d.0","@material/top-app-bar":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8425a605fcff9f0247ba649d1c8b16a70fe79720","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-e5Xj84hN9Zs9mGHIC8KIRGNdfUTnl5RH6jmPkho/WqZN9Yr5CY7TpqXTfHuWPcd/4imPkRQb3KRMkfcWgcrJcg==","shasum":"51fbdef7511436881f3dbcf389489812c3183079","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.c29a683d.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenjECRA9TVsSAnZWagAALdcP/31f5f0bGfDyNFg2gwpT\nC35UVvm2+HgiaXAWay+OF8T+GQk9lOtHr61BtqK9dtCbHO7hWKiYrJPyCygW\nqdmKCzzryZawXHo2f3ItnyHlBTrgnCm7MJ6xu9kfS+XmM3ufZ0NorEB5JHW/\naeBciihHXk8bDw4eXn0kvwJNFTlsYM5pT5yS+wgVuVe0pQ3OiS+RTv4Z1MXm\nMM5FkWdu3/65K9LyPAw4B7SfTzmahSxgxzFYFTAt3SozR93cBC0Ya31uA97h\niwmGG4cpsJ02OaIoK6UyF8Cl13EFXzvGRdaptJ/TDkW+AMCi9nHKlNfVtlSO\ntu4BEFEzQaV6zHbHaK21Bj/idTQa5G8s3i6CN9qZk5FKvktwcVF4WholtMZC\n2n//ki/GXhUyvFTvTqN50lrYLgJGLssoIIgzydknxG1z3ONf3U1spaTin4+X\nATIFGXATXhYpP/cslq9fv3lH4vOkBHi/alLQnNiDZtVav/52D7kWnWCNom4D\nC5bl5bJqdqRK7/jkdgBWtjX2VyuypdoQpD2htv8bTTXSCesVc5ksC+4xdBJL\ni3UQ6UP7YQhRON4Gbmk96O4eAJyWTDUOeUZIk84vkdBuCUO5I2I+xCPAgS4s\nrPi/VsCI7OkFCfJFxjkqHWgzQxkCePknDUl0LYQjV98kpWB8m6hm1mWYC+A7\n8iGk\r\n=DZ76\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEQiB5ipdIt2hePl/Yl3x2PvwZmegVfRBZocs8l2p7JnAiEA3fP1zQBqcY30tc9+C3l+okBXMa8/ErskMFFxzv/mXXU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.c29a683d.0_1585084612347_0.9317682990657068"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.fca3dd9d.0","@material/top-app-bar":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3eb322e4775d836b8959bdd2dfe63f09dd0e0fee","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8AeoAeYR9JBiQsxWIRvP7jbkdB/A02/fyz0dDqv0SRpDhDJnYgXFqdZM24fiA7DRGSw+zpCdHOJvMTlg++Woxw==","shasum":"0bb20bae88aa5d74d1208b3e7f5206730b3fb028","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.fca3dd9d.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepsXCRA9TVsSAnZWagAAEXoP+waudnBPQJ0Ci687NRQC\nz7m7cbRyJ26ZHEtGmTHAnbGqiL6SPmLr8aAPcxsqo6A8kHlz/SqxZRlTwR6K\ndq2OBnGfekeHIgWLERWdJkNQgG/Afirs7FTzmv+2lOOFWz6pSUbAnH2Ib3jE\nRd0OvtBPL9nxreR6vUDhPoonpjfhZ2Np1BJVOQ/EvfwocIswdIr2Km+xVliC\nLll8kUjFxRXhrSnRDiK5D5wiMSl2Lu9qxjk7eg7xPHeHgZTP351Vm6rnpvea\nHD0looi3J0ipArCBybzMOSHjyOnhaQ5nc/oAX2wBx59ZV5cfr9zq8hTvQ8yM\ncEEezLRRJy7rf6ZJ7JggqJoChqsVRJ/V1yvuc7NEFg/bYWyqk/klICCu2m4k\nozdHgxJgn4K8SgAisXBzROIDj165M7WNz7kBHt8Pw0yVCHHnz/8jqu0muyxP\nOoi+oNxR+TZYaJVwGTyHBQ+7Jp/sK73Y9eQU1QsQrbvMH2GzDJQHKchJv5dU\n3Hqf51ZWB3lQNnQNBkdrmky8FZ9Np8fR03L3dTgKZpVxciOyv3oVcZRMXuSo\n7lvEeTgcWErcX8eZNReJ34VKGJxcg5lEEEBMzEzP+7jK7WyQlk7Mhc2Y4qLB\nMSdHUK7eK01LPMFfOMEjDpOJYjP0t/M7QcZdm31Z2z59huyTxQKpDRQKuq6x\nB42+\r\n=/LCE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD9Hf/NMoTr/kzW+QQK1RtSBnXRxAUbORqfAHZ21IE3GAIhAI1Q1ZTxHgXuAu3rw4Gqa6zu3wYXhtUmkcqPn94qAKXl"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.fca3dd9d.0_1585093399238_0.7511771852147835"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.1e73da49.0","@material/top-app-bar":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cbf63b814d242690910ae4946b6144120c317eb0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-EwuFnTGZH5MMLL5At3X+V4pYUrd1VyKHHUFrzX6bDFXBF2bU7Xim7Hnm75ZbqwBJdEgHhq4hPj7JxSYA6kCBsw==","shasum":"b31d2e977448572b7b429902887cfa5d9f4b5f79","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.1e73da49.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee81mCRA9TVsSAnZWagAAvkcQAIsF6Qe6JL4XldEjEIjw\ncGAoY9Fal1dAJDZKiq3crbqHjGhGyZevREJc8TVrkibGZ49IwsumWtWPiI9E\ndSAOyJ+9Q4sA+Y3Y5FQ2+5mGCiDgN20DxalZusjeHYupt1LtrUvYpqe1KSlt\nF9R9OsL4Mn0lNqs46MkS0bQp7c3b0YK7Son3lZNOtC131+I+Q2QFRpNtE2n9\nGYD93+vySLlAnAAamy+3fpDB1h+annUwXAFBuKeG60JiqdLHKINkWXEqX7tv\np4mZKzQvUtaWdItb3v+Pu0pbjG4Ok/u+hjXZJ0+xw0E0V3fzU0vNkyfFiDIO\nUmPVrIciwwPtbijV9a7Le/rFyO7MA6TsJHVVCmfpjh44aDGv8CGQSAxuYb/T\n3W/T3rp1nhDZrFBf/Sjd7FN3b6nflxCaAphovOxxcJz0+2tidsir5kzKswYe\nO5xrPUajtgNHXYGPIsgpIpmUPkWlqfsNuQoGy0ov78R4T9NrgNA1UZ/aRIR1\naWFOLMycNqvACHeq1+UyHIKbJJ6I8BL/kTDuHDo9c1I+hF0o1wWr2b22+eGJ\n549VkcKEQc3LUznjpjwzpRywwpO5z15HjC9Bo2SlA53ADvmgeNwMBPJ7pMTe\nUfeE3ssr+b7sDJ3Lun6KlFtOJECxB3Qc5cWimA4nBuJtV9Zifa+uuPIOlRVR\nqyAe\r\n=I5Wj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD51FdCdrl2nGLLh8TCN+0FYVBcY0ciCUB1eOp/VTlD1AIgOZ1nRlG+oc6+EuDmYkqSRCZPF02Hv4eHMsy1lTq9OI0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.1e73da49.0_1585171814214_0.11484490285641846"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.bb6dfc5a.0","@material/top-app-bar":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-pbIXXgljORWnLdFONzk6Khu9Gpq1dqHdhlYULvef118VSZRCk1fKTkWlqMxUAkOgvk1NncO85WfVEnK7aAj8Cg==","shasum":"01ecc3eeb7de1127528a9a152f2958bc46605d3d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVWICRA9TVsSAnZWagAAZtcQAJOCarydvHna+Sro96o7\nBqckO9Ll9861Gy9OcvwlEPvmT7xaU1K+WfulLA2qzF6HC0iOS9Z8YPQR9vek\nc/ji6tl8cID+uUWBH3wKIYkDZpG/9mxQ4Mut1StcbxLXcF2HYWkXmUuOqx1w\n7m/VmU9/DjiUS9eJqTlWnH1JzmY3oLrk3fllMiNmzIKIxW4roexe6LrauVU8\nIBN/pOagdAPCJK1oHm3YWmK/IiS8VQv6GFZaTg9D1V22Zh9TJBePlnnHwSL7\nuUFum5X3kkyMbNw9GSXRz1v6nLy6uKmAz6gd+pank+jPiEi+mRfEpfLBGVfk\n8rMzOurrBulNgRJUhQYAaL73qHbH+kKxOTS6/U0GQZY1KAYvVuP+YuIHZkvD\nLtQG8b+WrOMyY2whEWqyhWen9PIj1xKqqpH+x950C23HMMg5r+t0QqqOoVMQ\nXufdWoMDQ90QDJyvQs7q6z1VBnQcINAKhUhZaSI7M+kbIlsgHArURPmcKh3Q\n9kqT6zqqNCl97GyuDjt6rkITYIYKfKAeDp5kXe6xvXiWh4jjc2RJx/KzGxU4\nAgVQVs+sYDsSUyq62HfJoUuD6FjyFm+eaIUwOM72YimtMgcUsuCNEVkOcY1d\ndJ1j0hgxKZ9NovUaKIZtV6DZWoxyzRUbbisjDkOsbAP7SM16dpj7Nc/BUUKy\nbpu+\r\n=qrB0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHf93g4FvLbNDvwk0Lxr4jdFq2bpxK1YpSddD+oPNACaAiEA2WlUoKprvUOS08QB+HmgbF8MAh6nWnhDO0hXh42AJ1M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.bb6dfc5a.0_1585272199794_0.4284958640579344"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.1884603d.0","@material/top-app-bar":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a072ce4f7812e5120dbc51ed124d9669e1f7be5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-vjKFrlH9nnuXOQPf21NR6fNXXU42InWTLQmMeH/KyO8/LLDPQnIyLn8hVXZP4uxwW8Dnq1Ao1nxmQkrhwTkD7A==","shasum":"25bad5fc3ea719209303524f9b4795e8ff379270","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.1884603d.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflo/CRA9TVsSAnZWagAAYV0P/iuOkIrgjMBk4ZSOIlzX\nIa0Tl+LYavcXOkgTEqoupYN1hZrU+f8z2RU26ycCYnHwvZudcb1PZBnCciB3\nnJ0ml7WqmRqWclYIW/58LIE2CoojCxJO5cbfhoMiSzoh88tGAiYr9AS5k7BZ\nsQnkouNalSzwbfnK3Ecjaq1NBhMTMrsCQnkmteN812A4QfB8ItGmCcdFZXAI\nlX0oDzKOECOXzoqB1iw/Gt8MolXECHR5rhqjutgzXwX92ukIxfcKWo/cFDqk\nlP1/LwWC/VVi1Mcjf+49VWncAzTqXlxuPLflROQq9OzmRn6jF6dZAEPUGUrD\nUB/LmLLL1wUa/FdT60S/RYGUiIGCLw/OZKKqV0K6H8slOaS6SxNrzl1Ms0Ux\nXh2OWpw5jShTp6h62RAC2KbszjOObZTbBSMxEyLyAQXFoihDq4zY6lMA/nGS\nTDr0ipIpaqdF8kBkYtLIfEfARkicLy5zSWD9jVA8v9veNMTkM5c5MSXrkwke\n9agOKV2uLzLklazyG7LI1b+fNJ4lOGTSwi5CR2j/DsPtF8SkFiwPygxBs4ps\nrXdr5IP+ryTsC756xTRZQET9F+tQXCShUGixU9lUX4+KSGTnIT94D5xyj6SN\njydtkHivyHzUYbh1RNk431CsV6R4UPRBrWTsk5vba3wusO3dwVOgilcPKd2u\nFJ3L\r\n=UU/Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhQv0kdqy0yA6xLPpaFlpyjmW2VR2kSZ4n+0Ytd67WIQIgWBkn5wKg/3l9Na9B1iK/FlV1q/pAlo8J6dp+xP2byFU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.1884603d.0_1585338943232_0.16073131236017657"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.aff73cab.0","@material/top-app-bar":"=6.0.0-canary.d6315efe2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"40f9b297ee5f13af191b6bf450012454426c44b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-1wpBOBYaksfGzM77e2ZXCTVfRqNehmDHgBdMX5MxKJoJL9TUj+RybvAO/Qrl1munAVjl5XBpl2NOc4iHyiSkAQ==","shasum":"95ac893c3dc2806b37902d00be7d6db17f254ef8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.aff73cab.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmy4CRA9TVsSAnZWagAA1Y0QAJ+QkB4RGQZ6oKqnW6ob\npDK5JLyrepOWzHE6kOd4Rb+CWOo4djj0kRtYoQjtHRxwOQcDJZMdLBdAeAiV\nkz8hBr/P+IK61gzw8JPLASbTllGZSlgyEUWauCGI5xHSq+muq2A8i1w+X6Dg\nZ5sVpqBuzHbjeTLqyRzrQTazBolnsUzfLQq36knoGg+VCSL7orgQbPNrZ88w\np4EdzxrIDQSZAJNw43q0hMKseLl4Ci5BPM7xovdAlqWRzzrcu0blnIGfr3/B\nD/gEw7SmX3kdPEjouo3MCye+9HlnwexBv/4iukhvz+EfCpD36OjckSmH/tM8\n91mFlqLs8hrVkI/0JvE5WW1kfXEmPGiWZ0h6V/d+hs+n7qc2MtjJI39EDC/g\n/tr52OCBt4Jj9IKK1lJ3eadRGwrT6GFkQh9FduatJtIFWP43JlD5rHwbPXWC\nwdYoqENTv2FckiRtzqN582a8tGpvmJRshZ9Pu84kwLiPKnXACIIQ4JbwqOFl\nHyNCwv+AHU6FuT6sz4T4q7ETxAn0HnKPX7uf0EP8z0XnRiwlXxEKIlV/bytH\n4BzbE0Nsrcoux5KxDLWCF7YoGVmBZEx8b2YaO2BXHUBVFS1tgvtbUljM5BKE\ngefmQzlcD5SZt557+qdczOYp6LbTSwHbx6Mw/jiHVzI82+7aaWErQow6gjrf\nj2ed\r\n=4GEN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBXzYtkUS+mrQTFngSRpnTrWmFHtRQuVSaCEN0kceN/OAiAVGSKsgYBzgzVsbu84pBPnzmEE9Tb4vOyo8TS46ARtXQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.aff73cab.0_1585343672315_0.8597664928846229"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.63168f61.0","@material/top-app-bar":"=6.0.0-canary.a3016368d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"84107987770a82843942246baa8226b37f269240","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-hI4xMLwxmQ78KEowaR5b0OJhb1zjBjagqB/fAUTp+BAIu5Zejs7VXmzwawoA+tsorwiPNpBUBTLPaa98xmZ+EA==","shasum":"4d03c11038dd32b72265bd14266a10d86e8b5d4c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.63168f61.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4gcCRA9TVsSAnZWagAA41IQAJ0ilsPRRBryuzpqNHW+\nyHMB9nlTg2QVq93Hut2uGdJUbDCU2ou2inZnzIOwxNa45d9jzWRnTJXrzis2\nQsBI7XP4jXrv8E6yMVFrdnfeIjTbcIzhHDtO/UjyfBWaLVRecoDyzDAfWF6J\nFa0SnCYkRY6CQssBss/D1UPJKt8tSZA/C/CNEv5lLc7N28A3sn6QehtmDALo\n7N3zBxymYUkWJw8/LES9r9UisxPVtSDVtdS1VVTaCTkcGS2B2URBfX+Ra53O\nD2PH5KGIo4+7CFT9sfYK235T8RVke16vHYU66RV/oqKnzdQ8gJQhwL0Hgzix\nn0SyV09/Xf5Zy7xHpK2aLQDeDeuZ8yF6Khxo7Kl260mqZiCLBebMzMggncZc\n9hequOlcDjS73yISug2c7wINixD21/zuP0+RipC2njYz7QtLNkcp3qkj2yy8\nThhLisqY6TOhRv19eE4Gb9bhTUoWNhDjvDGptxr7/K+cpkCvoKmHH1UptOeT\nlD2bcDoszAdFo+BDYbcYSdYgFKnz4LqMfyiiEbF0oirb09pTG7FcBO4ar3oO\nn41EYFY53do8cbcYL4GkESBIQ6618ze4pb+Z0aRq/hejdyCnCNFCmpj3eHGZ\nQM6WI329IPVLZAr5KOwfxk8qYhgW/S0gvPh7uPYIPODg9dVQiDGimY4H07qb\nHh5m\r\n=bDzx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtXJAJaxbPwhyg1jVE+XZbhgm3AVkCtkygjGcUeHYh0AIgY98RBvt2dsgK4dBFNsfopPr2JTqxR0GmHoZ9FxeZJs4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.63168f61.0_1585678363724_0.4409021596138778"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.9fb79b3e.0","@material/top-app-bar":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6669949a31d7f92febd25f5d49eb40a5db4aa7f5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-YTf1Oqg+OgcGa1/qXvb9U8shpiPuYCwHJbNkKblLEARDdmyNYh2NlhdsbqidjEQFEXdXSlwdEkXOS8h0u8SeAQ==","shasum":"7d76aa45c6b66649c02a2d0194b46ad1a383c3a0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.9fb79b3e.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7QhCRA9TVsSAnZWagAAOOMP/RKZHye2EdNm4Xhn8taJ\n/hiYUicWwmim3R5U9s3FPACyi7sBM0Nm6SVUQCMJ9DOwsYd0+vDAlDIWNEfV\nbXuWxY9bY1ecC4nN5w4C7KziCOKB8FZUWwaFJyN5zg+w4pBVSNDeLemi8tbk\n1ZJ1UmkfFJgtzhWjL58gXwdOCXu0F1X78Z91dddxbD5lWRwz/KQX5A75hCmK\naCtDrp4x2mmPVv5UBkP+r2VcNB9iReNoVLB7rw0faYLa/I9cnzErUTmu2o4U\n6IbA8mdm1ZlWV2v4Z6AhpH3JUI0yAlKxancM6jq9QD91ibqcKEf/gYwxuN2a\ncNcBHIe468JeCaygPrB/gv02KC+aubOH+qkojYUbOWLVp3QVft2toNTeAie/\nDOT8jH658JU1tyAXvinHkkULtB1fwo/UFJWjajkGePkRKiWbEFcPk2eS3N+I\nivL/J68oMPgfSxlRLwjD0hUQlaoluos+lCrQHsmWz2aX2l2/5WQYZtjaJwcM\nsRR5woVWS4QCCRLtdTHqbyvg2CTDcNM2GVaM+R7SecZjb9ZbUPV0Fo3PRRWs\nPftVSW3qQbBde/k8wPYOK4DgwCn9fXHWIEZ/PXok1AHqvMgDpv1R7b/RpUPu\nse68MnPlnxXpKY+z08ZN9WabEtqNVO9Z1ek0MW57niad3kWqe2we6WUravxj\nPV1M\r\n=+hLs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDF1cyzUOaDsFHepkszOxi20FpzqAVRa4YgeKQn0UlMBQIhAMeXhkyxxD2mRG2X3U6pomvoOjq55dbDq/deGUNEhU8z"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.9fb79b3e.0_1585689633291_0.18321877784847773"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.9bd3e9e2.0","@material/top-app-bar":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9b56904aedd36911e83576292843c11af1a00006","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-0EIBeCr51ELa4kq8eCyyKbE7A+8WVBFCSBRZR4P/oONv8NREKmg0j1jv42up+dGg6OUc/N2DRVhmk4RcaWALVw==","shasum":"bd4cb4666a81202517f6380216812840254ba8c8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg91VCRA9TVsSAnZWagAAKv4P/1UOvLYM62WU6NBAbw03\nbd5JHCkuW4JI3qr4rz/rFfUP94bI4iO4ZgY9fy34ghBwihlQXIhkgEGg0x0J\ngRSQnyJLNwwHjXGGA04yJNDUmvUBdBVodjAOPYg4vL92lvw1+tcGAzfliF5K\niTvkUXNgobXQTBeOIMLGG7t8axK8EbkSCkZnqVviaou410duLxgs7VwlYZ8y\nqO2LZh1+txOsqMD3zdP1594O3RpLtW/OH2ytGd9e3xkUMOtcYFYv7LIS6Uwe\noQXDiJXfEJDwZrIV44Mk+0tvv+/YevKFhABpV4wm7JgHStNczEE3BvUdT3Ij\njrCW6vEAoCJXTtYExHHdjz9tzD6vqG8ENgV+v+7vZvOOKaelcudTTFDFFkTR\nIjYCgQvW2aOfVbfkiSwErtMT+4YygpbEDtfmDJfZwoEBbc1eJnNdm6uKvPbW\n0dujilPcZ4A5pRd1OqGmRQeSS+vekWteeEcL6+R7cqbADcDNi/R9gafkdL58\nf3S35xs9M+lWIVsLdPvmvVaUv2RswF5xoTI9Zb36/728y3XbdDQg+6o9yJVN\nxmqUP+sk8nQ7bN0R0MxsoK9MuOOLdOoKiumMpM4AQDVC3FM+bI3+sLja7Mv+\n8UjEMgj3GDMwrTLxP4z+BLvRPoiTW8FmuhgyQC+2WYeAIkQfqfzV9EbQRkQD\n4Hpx\r\n=zErC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvvDj3w5Wl270dsyKDBLImdFjsOqVd893dpnK4BNwYnAiEA3Pchx8VpVEsIcj17t5bF5sq4vRDHHt7XifQJ1ZzcKPs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.9bd3e9e2.0_1585700181288_0.8574222792369997"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.072084ab.0","@material/top-app-bar":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98a539f9970dea2ebc84f30f462c69e72dc0c4b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-2chwzbrJrNI+SWBzE1xkr6SrrIZ8he72kNLzOadGRCOw/AEIY8lSAnRZn39D9co8JtUBWhvwTrwCtPp6Vw8XOw==","shasum":"7dae99d00be57c7074a1ecaadaa6209f6d8273ad","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.072084ab.0.tgz","fileCount":11,"unpackedSize":29408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehOAJCRA9TVsSAnZWagAAnUcQAJ1vxoPbgoVK7fAPawhq\np/DuqXpnFK2dBiOLfQUrxrHOri3+mxhtmltBz3LqTrcIwHW1NztNylr0PYRA\nzweMc3Zj9NTItUyWxmVAhuSa92btCIZk9zd/aR9mtjxpUGsy/YoR6a9WubjC\nPbeIaE0RK4THktYrNA+XltxWddKG23WIbulc5YPp9qXgjqpmfW5UI271SeKi\n/ZBwn4LhWq6ov6bgeqtyS+CVEtHks5tfotG70oh2lmV6l+KjrNuvWprR6K23\nZJ3s90huOoxRIgvAQr1EzhJISmk0c6m9X+kOdAf7KA6l9XqO2ERX/SbCK+dG\nvwfIVsNAUlUAZFtvciir6FKrfwUh7GfwtHFmC3Xp9bkSWjAYA4YI5Gg7vpy3\nWnxlPVGvkRoUVrOCRhlz0wcY6ZLxqDmPvxlkpSvhcUoIt4e74XDa//xHAm6K\nqMi03gumuyL/7KQDDY2Sxb43kNcOoLkIZAl1uqGhnY/shBCvf9CR7RA25UXe\nr8tMeMedxGLw4GCvohaAQOsPdKWJRWyE2W/hOzMakBPOtUTwke995nOcP8bS\n8JZoxYNMhJeDQh6jeis40+o7QDYsCK3IG6UJ4RUJJiLsNqwXRfXul17Fd4H8\n+IRWQ0R9EDyGhJZoBBWJNCF1iP1LiBbGBadpAG0RsijSZYuL6hjdO3oTQiax\nEORR\r\n=5f9d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHrm1/P6Y0k+Ll4g3WdJsV+6CCHSvN29VGDw+b+Bn7jbAiAGyCfyeVNWKVcBQZnwLmxrJm029vhx8iykqVdk+w1JjQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.072084ab.0_1585766409279_0.6647841227506812"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.4dec04af.0","@material/top-app-bar":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-aCTvESQwr/VmxnT5ULryWDc5oq2grKxxJuRPiY7vcZfFNUyn3tQJUBZPqtONIFpzOP16Hl4lGcgPxU0uS3dBDA==","shasum":"50e683724875fc2fa580c8a94fd7a57750986a3f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.4dec04af.0.tgz","fileCount":11,"unpackedSize":29408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zFCRA9TVsSAnZWagAATxIP/2pVWUi5WUYhgdzt3TG4\nsiV0C9JGT0Qfx3v8oT6dfHoKh9FLvffa6HeVNNU8P5RJ2p6eLeyZSy6vbv7C\nbVO2bvsDrcQkWvImfj7me6Nd2vvTcqadJXj72DbAwGMtnQ1VjErwzCW3y5Mh\n7amptebew9eWomBgM5BS4aXhV8En2Wp6Kuyk4Quz0YPXouhtZ6MeODg7CIlh\nEEsqBSkCeqW746hSeuVcPcuVZYDgtWy6S8ofVtV0VWjfY1EIt+P0CnmEzyhz\nlhpHbU99usigXyAMScQZ1efqAxuYjx9qjsFGY6VsdNW6EFfWHxKfhWVOctce\nrCw2vb1myaBQhBCHN8DioTOqsJCySFJhofQJJgDQhRc3mSpalMIJVBgzFKsC\n0s1gINu8KJUCX1SlwA6NkYPlktpDJXi+MBVnKk/Qq9d2m83HsiRyVd6VEX8W\nY61iUcB69mRnX7a6LSwmHxuafRxGrZGKMhbIYWPNlXN3WYdQwlomQOEMSHcu\nA+/i/KNO9LgoCP/q6ZQ6PdRheZDE6u5wZEkde3W94bq2iz5j9/BRqbvg+AF1\nYzcjJ7QuK/wHZLb4NuvaDlH6owutdMTRpt76zRc1rk5t18DD7B7HO2euWcdv\nvBtScFV0/EJEi/Rh3hbqxsuYIQRVxjL88H4b0VgOL5dZR+pBuWDVAAaifgYy\nZ1Lc\r\n=pWX4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDdfGMeGFh2nMmC3nh4xvixeS/UWsynUF49q+CNXiPbgIhAIqc+yX2yQbBXpidWi2Jk+IJt8dkh3f18caXsIR7NgL9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.4dec04af.0_1585945796706_0.16854488167640946"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.9b676354.0","@material/top-app-bar":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"423f1ad2d234953804097bdb30484154440adc63","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-T1cV0PJpK895F0Nnc45m427lOmy7XO0Eu3lqorRtDm+nqd6rQedr+4IgcGld/tYkLnYqsaagE/dOlkh21NG61w==","shasum":"31a8d60081ed09e15a3cafbde913af48be955671","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.9b676354.0.tgz","fileCount":11,"unpackedSize":29408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zdCRA9TVsSAnZWagAA/KIP/0MKCgaqg7R5Cb5hXfFF\nxVqXhY0s6nLNnVm3pS1poeyCF0LTNEvsyIA8XPgdYGkeciEKocwVo2jhBLYq\nST80XA+LcLyh9QfJjRwBtpIXZwOkyXJPrxGT6hT7/i9Zo9pmwan4ONhE8Pxx\nWpILu4qIQwMrqV5Zes0gDv0FUXiQ9XxcbMIPuMfKS4rDZ+Sa+cLpupgZ2TIJ\nWSVUwKYWAd29GPIKzQbqxY5EzNZFWkcU196/OHrxRTLQJoL0eOtv2Fs4ULK/\nCrbQbwPMa80uUy+yvm++xnbp6L40hkj/MNRIKYPZCNwlq6hVmGA503OJqtGD\nxucEGCDWXNOZ39Q629cuoTVpo3vujgb5UutXQrw3ZNQXicjKzMWt1vl7Q2ib\nHuq6Q6yy1hWgljuQvXoVHw0xix/expwyFsf8IbZJpEPMaz49nEy94obSwX1S\noa2M7OgAYdTbLUGEInzeI0OV0l6JB4nG3b90QNPfKsHtST5zpGB4rFKqmVA0\ncpb2BvHCjY2l1Uv1tXnJzWqxPcKzzdwou2OoP/zpOeVd6xJb9abQHwSu0CSU\nD6qrZWi3OuS9D95kfUDEALD1MMWowzPrJeTYMfeLATiaJ3xLgi3Vwpe+FlY9\nMP8xDNyXhV33cZ//NKbOQb1PrOliC+Bf3BVfpBZqbNN6cMozZ1Cr9IIzmA80\nnSHp\r\n=cuDO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGV+jMgcWSyr72YeuTpuCzc6u6wQa5EWefrgqdKlUJhCAiAgBWxiQ0akvsznjvOT4y6rDSF2PlNTpSgOrdiIZIVMng=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.9b676354.0_1585945820878_0.9378975297914747"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.6b946095.0","@material/top-app-bar":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b65dfb6b4d3dea0ac5681487459f46352e399e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-RDC7+1texQpC66jcAKxc1DJm5WoBHufyLY5S6X524AMGpvBXLpEEHXFlfxgtrPmpbreqikyCt5DqpzW5plvggw==","shasum":"2cc2db342263e7433ea5ae244a41b4975a1826f7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.6b946095.0.tgz","fileCount":11,"unpackedSize":29408,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6mJCRA9TVsSAnZWagAAJKIP/1ojn2RHH34uYdIBlhfQ\ns7/w3ljlPupABBDbtTzbvoVZHRKd/Q0opxQekPKSyCR6hUxYS9Qm0+MIWa+d\nxSQaY5yW/4xANVY0K/bwckU+g6KLblBALD7R3MkoDL8KmU/YDSqa+DFxPciz\ngza5H9ydXST39tkcKIhNKf7H3xr3xWBMVUxiFcWVYiyXzW6jqriQ2naa7N8b\n6V2Unono4y4Zzmpch486hT87MbnkazPtS/AbTA1Cv5zgM5Qp8fcXQZCU7vOM\ndrjBbyKc3bQFKgQBmm9g5m0SZaocL8zFQazC7iSVPgxULk/dlZ2dKpXM7gQw\nN4rxbpzd4CWPQF55BPz2nmnTRNWmLjeWpJyYySIdmunICRXteelI3akd9A/C\ndenvYaQOkAymovuDD+z5FTs77bdnPqnY4PzySl3R2/KmN/Do6OfC0VLRntdy\nycr3V4z6o+oCvI4hpchjpBxyp/EBkkKXJzqOxS3KrxX1UZ2QdpEp4MrXT3iH\nJK2QJpLq9wlDsCXYtQkLVDPOBNANvitNmXZGPixlq8Q3MFbw96pk3/Q4QBOK\nqDrk2SozjRUgd3Y8kwt9GQkwPln/nQQoof9pbmQFs8+qWGA1jzOjpufpfgG2\nnfXN+AcoONb2A3XUl7TfQ5K15NOHpUYIsfQHHYCwEvenOQQY5A9Rm/vsQoJJ\nAeoL\r\n=jIzR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDER1mHok/if0FfAcpzWK+MzFzBZGLsfzzSgQbQfhai+wIhAN9PKCHa1tAgBiAvthrqAU9PrgZOceAvkeaZ4OY6qOgg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.6b946095.0_1585949065205_0.8060278888046861"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.5ccbfaa2.0","@material/top-app-bar":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-lfwNDit7Cbw4RqUUGQOdH/Abaut3aF8fPRKn+35NbNc187dGG5XSbhegjBiC3YESYwm/bL++gRsZ5AYaXFp9nQ==","shasum":"f95097a3113e6ce700c22caf694aa016cd8c12c0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6rWCRA9TVsSAnZWagAAxpIQAJlBUaoUKEbxbr8qlzFr\nP4kdjCSBla14t+mUkz4F897wFmwaFEi9vcynePE+ynTZdyu67zYCg1nbSpLJ\nSFHKQxBhlxv30hz7QBXKMLdo5ScVhliBDUPJB8+n/hjS4du+hsc35ESfssQ4\nOTW/u8EXWtaih2gjjfTRb4uzWoR/79rAyTkIbhSfCiKBbsY8Xr7DHL4lH0qF\nXndtGcHq5I3ikRdY1wX6hU1np3HQZfOQ8W7Kr34MFeCPeQiSn3F0ZG45Dk1J\njHt1caQtVBtCYd0vE9LzO0ULcjfdqvZfu1elPuGBKsMkSFp3Cp3w5Fc1mGnz\n61V0TUjOp3QokcU/IXuQPKoEqavQKeCvO0zzvZcPp9NgNsNCpWKruSF2W7mh\nNWMTmD1i1Sg+A0cc0iZmWAehcNtlvFfIiSQFHwXcYF+7UMDwDm6vGdcWM+Vb\n3sB2rJzIytgYVH8gknL+wSIkqtQ/RBWvG5bdEbTS8v+4/qgqdJCJyrzmS52V\nfgPl09ruvC2N+CUFqaDFyG4+LEVi815JZaxXG3LpCkEb87bSvdewtNxfjWY1\nN40pUJE6ja6s5gK2PTiZuukiXt9I4gX5yILuyHUDs868S29rIMFrU6vL4xEA\nIFxXpGO5MOMySPHzBdgMUk+Evz/xXkrGST1QIv5b8/u7kDRzDCPaTtC8Mrwz\nOgkZ\r\n=38GB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDovLcxrAOegiwbBp+qqoNvggvJZK8DfkgYONHbYN/dWAiAQheO59xKwelP3le5uFyWgPn86K5grFRDUZXUVJyCpHQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.5ccbfaa2.0_1585949397700_0.4138278226559653"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.a0ab8772.0","@material/top-app-bar":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8rwb7ye/R8tKmdkuJ8ewa0NHnFz36csRjAscB/8aDZvpvTCW9ajwKQXZ1om7lMzKBDKxve9D7GKz6Bo3zDC1+w==","shasum":"d4ed77e72b2b714b648fe25ff96a95ba366e9100","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.a0ab8772.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN3jCRA9TVsSAnZWagAALjQP/RrOARzh411BiOe8h/r7\n2t/nP9OC399VCLX7KC/PLJ3qFeSFZ/oD/O4ugVIphwaeXJFtylIl+ZMzjXOu\nWoaFqLGieScWaZL6TxjPD5PqBrg2p8rN6EGJ2r80625uaFVh8Zp0fVGd6vIv\nV1SjzSnDmYF9SImKMXWQHVd3d+iz3e1x7K/UmPLmX5BNFOtjjFw1zapmrylt\nldA1C9+EtsrPeka36XEm3CVW+F6GwYvlAwuguhim8uIZDhAWU2HUFWyqgYHx\ny50KhS/gOTjMPaJ/BwWH1yd7C1bqwTqD636M+F+QgMOCr0Z6kefV2KkImbO7\nJ0VI7XiuJjO691ND9qSNp6/2aTvpM3j2ZHfMxIyeXNbqmQaZ6q0BZGbWZekQ\nWaajLCbt+/oUIYRWKDRTmu2WD1gARiyiLcYhJitADRZQuUbd/5XK+rrVV6k5\nDisdAu68IGVbKBQM2bOz/Axi2R091WXYH9NUaF5o0MiEf3npxXM5kgtB3A5h\nQHyJ4aQqeESn/ycnmCBEojhveMY2EBlSzbNcqZkG622ZaQ/11yFjFfMb/fzq\nfxxfQECMoAPjM05ZnA0zkeWJirAoHAVsgcU11iww6rscLxxOP1YOiTLtRUFk\nk8FeeSxYbdegJc9lez02N7hwLIg2mIcT70EjgeMmgpNZ4OsKmrOtobTbOAUo\nQ9xz\r\n=kBKB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA1/0rqiA/qEDA3GSmmYg/EpjlnurbQRAfzaquGvJwxsAiEAzLsC++CDh5McZivQNW/KPPolIbYkl3I1a8ejcbos+P0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.a0ab8772.0_1586290147411_0.7706316748144211"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.8d352305.0","@material/top-app-bar":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d38e537751f3d38d903a5c7c03910a26cd301f20","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-eZfa2gJJPm9gr/GL8UNx9pBJicu/Z/pX8G8VGiYTjdRPkb2Q/I/HqTAW839KNC2R7G/2q2sGXDRd7tNHP5gFvQ==","shasum":"3f4e6f51a1f4abe052d6161e0039e1effc5d4b3c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.8d352305.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPO6CRA9TVsSAnZWagAAS3gP/A3TO7f2OLCWWi3F4FZy\ndtDdHj3HqxhDjQAN+wjeEN8ZtWnGwBBkPdwXWVLNl3ecFnFmb7ORMEStdhxW\nEoUtLRChuC3vgo1mnp3kDxnJd/EpSsxQicDmvkHrVHQMoDWcEBxT0Z9EtIK8\nEOXd03zvtE9NmaBfD139nmMa2D8KX3TH7gQrlqjry0DgPhKBXsSqSYOcBZn2\nM2hP6QHl0JhjL15cjL3UMt5hJun4vevVGhnU1IXQn5yiqHuKpHTJK38kvxu5\nq+vcMwMZ5ytUX42lD9sjatpXVaQzijR4bBlE3kOU2hFiEO+rBA6iXWjyh02N\nPOgNHKPS3MAYg5AF1WatnzMasPUhzk7Eao5UKBIidgxIXV0GIYccHYeXmbbr\no+LbNAlhJLJBzUPzwGenTyFsvdu7XYwsssdXUfeMoFtU0sZToYQJOsB12DLE\ntp6TG9wKpFLShYhY98DiXPq0HJz4T+vutKZfofx12Jy8vg8iM6gAhsCsO8WM\nuULDHcYulMiUlqzs25wpIGfhA4r0foHFTJPYF4A2L4ELeLgYLs6zUPRXDy4x\nDsfR7A9voZWzJO3kiK27tbAigfN5fGK2NDPJ5Zqb46BXrDYuttmIOSROjW3c\nitlPzZbD9VwsDwtULjpR5Gr3Jc820oNEdE2phEBdiCxN2vkPrlh/ph+cHOhj\nToB2\r\n=mgmH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEyl9Jld0LcnPjxzyO+Xx7hSCQPb8ay0sOYRgQMTMD9gAiBRZ2pi6SDSyPKsHZaBGkBqiY6+EGFXA2GomxbGYaN6eA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.8d352305.0_1586295737730_0.2541618394222849"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.31eac79f.0","@material/top-app-bar":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fc47d0412882f860dc7dc010657ade07c9a0215b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-JcpbN/rEewZQ6eSOv0+4E6pSAMxCOJif0r4pDD3UHRqRu0JPE6T/0kLlxDOa4dTuplZzN1EdOklXnKIqDgp9kw==","shasum":"903bebaab262035aa72e08f9bb6a806ece9b1d11","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.31eac79f.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPdTCRA9TVsSAnZWagAAbiwQAIEaZIrY6PW8qcVlG3+W\nhLimxOzPOI453SCsboPxvI3KnnyZEcvK64kFgksUQWroCqDYAcViZvZQ3elB\nechKiLOZfZRzmVGWA9jINoQ9+BdNXvDXJwiO+aLEyLnFm/sNN2MgyLQGvMhh\nWGg/dnl6/41VThrUsfmNtUd1Nr5kQaKQQT8HKYxu5v+nreq3W0MCCNHGChnf\nFib55JzOapECAm+6tYXhc4CAvqnPXa4DW+xsPcO7PfSg6EjeFSjoz65ef6xb\njiov9AoKCF4qzw4lyIioZVjm6G1b4dZC2dTmGGY8GOzMcwHYvnZYVr5ZOGme\nwWjXF1SblsEA8a+CwQ18J0jqpRO6swo2OSf3BwsfMlw24Vp1KjuTXL/DcLp+\nxvvri6pikGrtMAZS9pjnnO4XUvDbHln7vndMt6yckaW6ot9qG+OK/Jb1Jj9a\n4GFZXVPBX9H8bUHVHibc+5+kbfyI4f/8sNg8e/RI0wdwSwBnvd5VRfEZt9mY\nWKUlP1E56GqkXnNJ/ml5mRHcKb2Wh9RwUqj7+P1AI4e/BpHsvByQHdVvG2+A\nUd1cBDp4E6NhzVb8V8XncPqOIiSlt/vRAKisHZOC6lMdoqusmu7oblkmdVW6\n635GBGficnhVkXOgw7arNlVCQ3+WWz4N4EvkoMEJ8nu+4iwza/5JJkr4giLR\nZEUI\r\n=V0vh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBcOspDTnfXVDYX2InRo8GCqungr2rgbcYeMZBqz+BYHAiB+UNglDpOvxNjPNT/CN7+IyQ4F7bppWRJLma/CB0Tq7A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.31eac79f.0_1586296658958_0.1483592300209009"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.ba05565e.0","@material/top-app-bar":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f03dce4944b4b3fb02a1467dd03f7afc0b279a0a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-AFGaxpH3d+35PQZFHVVLszV6WGhI8t+na2Z81S69yTsLX/Fy3Q4KKuPSQD3Y++6XmoWcWs1YrvS5D0XxLH0lsA==","shasum":"4c8497ab826627dcf60f44451e8b4121835de712","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.ba05565e.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgrACRA9TVsSAnZWagAAR3cP/0GzfT+ebCTVUQye5h3c\nS3gsYEEyNu+jxlqSJFhhUYzpmEK5lB02EvyfZhdOphJBOtKBD1uZ9T7No76Q\n3YIwk8PldR2PQd/1KrOsH74YMky9PJafhWPyUU85yKHx7MNq41TJ6Mc+QJqG\n/Dus96v4KPsjjGKuGnX5q7vn2d6i/MvgIaNG39nOZRCZ6eL086T1VAyPNJn8\nSByhACfz1iABKtKZ5M68h3MWtt4Atncu0j2gWvvm5+lfSUxGgQjVYkC2g7YM\n4OSs2ccsJtLxCLMLiVAHCh0KQc24uh9a7UMUVIa6RW0i1ucdvazKurrSXrpM\nOaN31bE7X/OGS3absIEWs/00tIS221/9s6gBryqjBvGpHsUAWR1kdmmkqC3O\nMVfKTshyM7L13EmhMOogIlGJo+DbcuLLWayKDTKXbQ1BefEUFgZeCwOyjBfO\nTkKAfBSju8Nuw0kSw/rSbEhESBlefS7fr5MA8z0T0emW+VDeyYjdUa6rDolY\nlNnEwNVGG+HBM8mba1md2QLIYOkIfT9XRgqMrjV7NAKbAVT2XMU2DlJVHLw3\n005StPHfjBqK6kJN1j8S0pJ3882TjZWbf8gtUmm+aPkgNhsZkHQVzuKiguU+\n79+8FomZeMXyU1aYzsmag4JBzhEsd5JgSyXMx9wIXBH/CTVvYbtHHyzxevsp\nequg\r\n=+qyr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDR3eEte7julCa70+PICEH93aR3Fs5gRSjTDbjeu6mj8gIhAKntgPw0VTscddTLUi8XfOOjX+dFGGgyEiuWCJAgIHSx"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.ba05565e.0_1586367167759_0.8837786120139943"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.25099f79.0","@material/top-app-bar":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d2069c5f3f79653f2526d8fcca853faca1f2cba0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-VMQhOE3b8CRuIWufv6RuK+CVGVjTA6/SQRrd27zbwIPsmXkxllTgjMZi6VlDSwPi/klMHa2YrL9aXsJz5tMxQw==","shasum":"f3a71371742df7923d7e2fab5814bf62db9720cb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.25099f79.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkKOCRA9TVsSAnZWagAAM4MP/3wNnORi1Ud2fEqpxUUq\n32kRadXK1TuYuwEghzmVR5sau6+t6ZADZNxBgktlep1B+07B6ajCyyCfRvHR\n7eVawZqFO68eaEWv45ipiTvIztDhJqSetawY4QOamslpslTH2lG5OYacXunT\n5O5OsNB+7hclrR6w75Bpkub5k/g2V2mQuOE+noKXYFJfAIwtg4ylETUSa6Jr\np3ifJIaXVPJVQq8g0b8PTEkm0sl+4YVajB4dS0xuRFd+c6Y7wKoOW8B0KZmY\nAGu4n2vAieaC+ifHmiD4z+ubyN02jepJH1vB7DuadrWwW9jQUmX2yLvCoJUB\nr8+LX5e7zIWmer7HFDyxcysiEARuQ0NUrQV5jMnoxqUm9JBy2U6hWP6UKlM3\ncTXVnqkh81mJkmacPKxJhr8ehMJCu1172sNMslWcBwRfqjgW9KvH+5EbQuQG\nKy5368OXFqOZwk7nV8/i8m+H2aQjrMyjQUgPa6orJlop9qzst1k2EYRbLaGv\nFGRTpuO7312y2O5s0YLMxJ7fdWWr/CJUgbUnwl3f7V3iev+4wrGye2cGZeq5\nssPHiT/gkf1kFlmIy+SunV7+JNCaaFN6Gux+ze3w3a8WsjYmLyMhCveEubGk\nOwqBgTkvtw5GRPoNQngmhNpbsRIJPRaXh2ZB/Nxrcyz73/qBSIAsyTTxohow\ncUs1\r\n=js4b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChR7awbMd7PQ7P8IgLKYdI6RFeVwDWz3ht9R5tHY91SgIgA8Zh7dcvo2U4riSwTJGccyhN5Nbe5K3sGrtj43SwsUU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.25099f79.0_1586381453993_0.11565540050086454"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.447e31c6.0","@material/top-app-bar":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"948dcd3d057312750fa0c58715c74d5ae576abb4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-PgbtSpUSapRHj2HPVo9E0EP/V7I3IrfWbwXuKNuZ+JFfDoGmVnGNQjQ2Wuz83xJ6U6pi+KTzpEDPWm2W0AfmuQ==","shasum":"87c7b3064e650cdb69dec9a4415d13c8e694f856","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.447e31c6.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnd/CRA9TVsSAnZWagAA3JYQAKH1wTsfqu5cbegX/dlV\nHh+nDVATS65nsbBIz3fo4MP7VQiK3SGTO585r0MeARqUYg7kuO+1eIJSohCy\noYoFHvUDjtqpBeRpRsEk1Zm/GVjLw5HAYeOlmGs19d9NSgNVwYOkkScucjwA\nVsxM8p/SA7ecss0c2vomGzBpAnfzh00f/iAaE0Z2joZChRmgoU9DgFcdKE0e\n/x9jTa+Dg0fw/5/Fn4JM/recb5xJbeRXlo3x4DZItiJ7J8oPle+wqiiiiwIt\nVUd4+o75SYQnf1EtGpW0kNkUp8KaxK3lGlC+Ra8SgTI7Hna8eEBJ4TMpu912\nrkUQ7JxyvhfrwCOFXf0LXU1TbKxLvWJJ2HJw9HR496x6cHYB45Vxdr78BxUv\nkmupT2uiuutmJlFp30XQyxUjZ+N4xr1nXNpOF7smC4ZCQepa2QLR5hvdgVzr\n970GGL1xjmKuLlajS26qBv+nmLDpG7F0CERC0Yi9757H6utz8OWs8RulZ2Rz\nAcP+oalrfkBhf2isFuVon0+bBRTYo4ogiC47VxM8f4QeMCndcAl3ibcn0FvZ\n/ZarWDbz7AXBfTWkQBIjjonFLKAUfdOP8EpF4/i2kc0uGA+hpGHdbYlP7lcW\nMBNwJH4CtkDwVPXpZueQbLFILKnwSfkOCw77mmMg7c3sITZOgBadiwkO6nWn\n0G5/\r\n=OpJs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmAZxOc+KriDAoIXUuCLbcmb4J8NUNR0naKSTew4/8VgIgeqxae1vXeOMP4mi/nJpCXVSpcCe/sZKsUzS2RNOMTZI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.447e31c6.0_1586395006933_0.6037593180477296"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.d6dd84f7.0","@material/top-app-bar":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"74f8e8617851a447758cb395b1e8bd3bf4c8c323","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-kgfEVMiu8nqWLb6zaI0peeYPGCp9DVyWxn/+nPJBHTbgfDzcyF8Ez7lGl7g1W9So2ry5TDYfzXXdjcWhNU7iLQ==","shasum":"2c2ce8426d740a7f071b36250ad692b0538e3b38","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.d6dd84f7.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnmDCRA9TVsSAnZWagAAQcQP+QEbH4oAn0lxxtfor1U/\nFyjKL3J/WO8NXAY00JTkpXqMKBP7YaYdaai6EX9HbZro540t66Sa8AS3sl5U\nbhi/Ckrq3w4u3G+pzNUlyfBeRjtAfh/jNtZCIEkvkrbMp/1f/pjY0t+WK9D3\nR2ncmA8l6MEz/R1u/sS06XPEMfH6BULAxgdJ/7LzamwOTMj2/zL8gO5jqDUm\ncKh0KN6mINxHh+vlhix8DhxCCGVIVeZOEYrGcu266+RRpJ3/8517CkQPcujp\nBRmzJG+UURsx1yV2O9W1mYl8GvSdLJgUnSmLUN3M7DBTiY4JrQoMCm2AmaUu\nbO+ICMZqHs+egLobMb+GgsFyZ8hg8S0AOxazgOYoGOzVNfQ68E+7Y4wOZCFi\nGzxHN6eWl78lmfsdvteKHSEwc2TtKLoB8ZthkPpLhs1TM+7JYEz7fBzzXqfM\no9PMczoy2MgWgk4cDIxkBpIu4Ow1Dlo5OfDjdXG7wyE5JqBgEwCVaoQxxN9g\nrcdgZLuh4vM1Dqh05KQnO5FK+2ljSR4FLkwEzAauPZ0m0BzmHkwtJG9Z0Qzt\nzL2Oj6TqtNG/NJMGa346d/WDjc6tWSb+Yt5qb92tuB/hwt+JzCQrCbsR/stJ\nh136psCHlMukPX8itZ8CeKI2wHDWNLxiO92I7xyConF7jVXpdHL1bnLiXDDD\nNHeC\r\n=hb1P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIeyFDN87EprccAHhdEOllrtXTC/E2ZcXBS2o0X97jJwIhAJ2qX4xaHsJLNQirduj8hSqPyyRLkh0ab1D62QvDMfM4"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.d6dd84f7.0_1586395523248_0.6457255351198619"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.9b03ee68.0","@material/top-app-bar":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ab8e352b8af06379b151d5a80b316fcdfd6e2024","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-4qbEeugqTDnQWzMAL+LChEBHavo12kLajXrnz5CSnaVQSyAPeZn2hkIXuwaxDagD3tbzUgCmoEzejSToWbwOsg==","shasum":"5cbd21fcbfbf9ded1ba44ed91ae172c31fdeb03f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.9b03ee68.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej394CRA9TVsSAnZWagAACisP/0ZUdU+ra4AxyYh6MDm3\n8nUzdfXYaGAht0B8xoUd+4pizupk5KPeCewawHJembR+O20LCta/QV3P6qJ5\nql0iSkEczO3GzsHKlV0Js8PN9XP5C3+rXnY/9rCy8qLcvsBOniKKIS4EXuTb\nCmS+zJMzh8BWQRPgxkHEqtuse7BVIKGi+KOqzqH2+9AamEp78ulAG7uTguZK\n5ahB+enGlNN7kpmEVkaZG0lz4dc6WTmlIErlGM8Mkg/VYZTWYm3jCUK3T051\nQ7wIYTy1pQRSiGDro0py3L/AJmVAobXze7jWPAU1FWuTf6GgR4yRPx7mjpxA\n6GMijkudkLsHJW31h12Tzo3/FS/Lhj4CeqnoR94qh/LmT0EwKAmc924YEmyq\nmeQ36zcb5Vtp85psngEnF1XnayO5iHlHRgTshF4T2pPJ49shGi3pqyQaQC7g\nLIymtPOszuhzBJ5BWxCXmpmMsLdlrfGLGNdFfRWhbbH3G5w4W/2pXgDP3aas\noJWxvys9NSDEV3rwWtpdxA9CFkDR3ewtFv+sJvOwfvaOC5iTX+ADJlt8yVN4\nPcLX2LG73YEn/5U6sPjNMrWZrf+o0EBPfHnKSlJpvkhcrFDbS9xeX8R+jBOY\nbo4hTgEzylzr8afSDCZlL3yO1YBQd/MG4vhmZbuwzKI5g+M/cO79QrmIDYgI\nU+nO\r\n=/bEE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRyJrN0VIcyXGOCJk+CT6rzGte0SCmkNPR7tTeNQz7dwIhAMD4yq8aEJG9k7FqdhMfUNTpYDNGW75B0VV6X7Am09G/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.9b03ee68.0_1586462584136_0.5876429250678707"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.bbc25b10.0","@material/top-app-bar":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a56f18fee2a99903e5867ab91175e4802a21cad0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-ZVzPxkkptbkPAfaEgm9S4mGInyVLQXStTlmXLFNIJsMKg2eQ9FY8ROP1pNTfP4gv+IXmZ5AVK4S6Sjf71BQOjA==","shasum":"a474ce2268e5db42e8c9e7ce579b34d774bc6be3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.bbc25b10.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPcgCRA9TVsSAnZWagAAbqwP/2Q8cbv2Kfep2dOYA18U\nChFTDep/L8XjDhOCmZ1S8+/MPHO2hH2UP/ML+oFdqF6eGDa4suGuGW3Mp1Yn\n9nmp3y/0dYhnBGK93cWn0PyDlXZfGuqXxP8041flFcCOPCXUgka/fvDyfjWx\nwjmPU5VAbCFufaYpWqzJOf0kQFEz1CmwbLhQhYkUN5v1lbRdZAhJpq76f9K6\np8n+XUmDGWkaE58NwFPU36XOQiEGyDcqPs3o+KgiSwHHmn6cZVhIFvB1SyyT\nXNOLwEUasEl6rrk2GUg9Zfjj3k7MS0YTnqb5cVG+tsna5DSrieiLF7jA90wU\nU0YaiP16DGhGOiKJQ8sLVVJtyMtwTfZTOfQNBPpWNeja9uMfSBii/UsqU5MY\n0eV+rqZhIx/sbxrxfYKONRSQuurFjUw0b9vNA4xhVzCKuJffQW5yqm12yA5g\n2oWk7gld4sTZtaNWa0J36PjsZAc731kIEjrbV8RgXSHaqFzdVTFujHJMZf9U\nKG8GTgpHvg8ZQv4BgUYpIwvrzLf3OOAN9isf6xByUgs3jao5VEPhZXJKdTAM\nQl7Bd24Mxn7os3UycniFh5+8XGD72f9BtR3u3yr1FYJVxw7fliP/24BwZVU4\nfLYeOha7QVsVI421VtBPtR0zqhZbK3yiFB05f4BjN9z+TwHeEs5T5Llv7OcE\ngW+v\r\n=v/nn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICeK0QuK9cGrF4fA+5eRLTLwbFcB0bEG7c55wvUh+d2xAiEA/xv5QcoeJa9PYaGBweIYq9xoeVzLAlQT6esKtNgzCpQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.bbc25b10.0_1586558751736_0.36470831423027517"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.339cbfd4.0","@material/top-app-bar":"=6.0.0-canary.f172b0f90.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-XS3RHOl+vpfCOv9y+fPZb2oWF8m236hheHe6wVuwpA/TWo09hQvZNesCwTTFzIhtV9oLGFGxGNgL1QWqwueH+Q==","shasum":"37f6e5c62245f8b0e478083c65e294155c88e272","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.339cbfd4.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0axCRA9TVsSAnZWagAAdgsQAJjVvlkvTrEvUUiY2RMm\nxvN4E2vjmIiV8RiPJNU3Y1zEMtWi9QThYuMMYZt2xjmscNHh1aawYG0stHtz\nqOmT2UqgnzNcXw+ji8DRTwbPpouD4ZkVL00O7Z/BVGD6Ok+btFYL+nY2Cf41\n8n63VkMI3FboovV4Tr0r0OB0LMMS2NAgo3+nDe7uDShofSdvqSLukSOteMIz\nmqhfJ9ZWsAPprkpwHifOGEtkrkLB1vnsJ3F5PzlVQlkIiySWH2Afu9Y3DVlT\nMsp83KTood3K2X4AtT/UUfBWGozFsuknOQaLWFAdx6LlizTGDqGxF2VhNuqB\nubh4H5GYOtspXAwSZU3smw/8pm5YtS/OakYHIDPAcUQulJWWTaPblASfPOL4\npJZK7qYE92XiB08PWFurcI33VrS0FL3Y7BYWcNcCtttIwBxvNoQHSzppsm3P\n872TcxkRz6jTRR4zhQdz/U91HlUVkGM6l+iWKU3bnGKSwmv7MXQMw35c0MbH\nCiRCP/SUt131vjDUca5gnR9Sa0nDXMSXaN/LKhE+YSO+chngVifr2UtmBngv\nFE1WHZ6RiypIF3vPQVUXDqXFvAHKpThZ3J3Q4DWcWJ1HIbPjwgpSjstmJvSg\nV6RtbHJwSPlw4RB9g4hCp92CLRSu3cEGST/ShHiPghYfHpRD8hEz5LfVAaQ0\nYLwG\r\n=QxgC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDvY7y+tH1AMRt23e6DEcen4wswlkiPQdTP0jwpujXxEAiEA1RCX43obrzDLuMvZPQaPcN9J7Nm4yDVJ1dGcE/t5tUQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.339cbfd4.0_1586972337526_0.894820541953534"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.b74ff19f.0","@material/top-app-bar":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SJhy1tGnU+PGLMEK1Sj9TaTyrYO0g5pyWXyR2PAmd6vhZ6MMQ8ljFYp56N0XlRQZz8BXgUBQvyN3udhOQOKslA==","shasum":"dd2bc02c14c11428c1cae51d078f89767a74790d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.b74ff19f.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2jWCRA9TVsSAnZWagAA6cEP/07YvnM0s0tkk52M1OAP\nSgipwVcK+ZSYfpasBR7MlkNdHqFUYTWJ6vAgp4CtsZIJQc6u4yEQAFHwpioX\npk85zqwUc0fi54qwx/AntW5jm8tIK/dnM334nA08ewh3Ary24QekjBsc20Bf\nOu2shorfMaq/nC8LtnlUKGfMLLzmrpA+EAeNM5XS+Rn9f5asGl/xPqMJrUSJ\nHj1lPFmBx31uSU9lBkj1wBN0Q9rhsk4sF0PTYfQoFHbwf8Dfz/zOCcZAZneZ\njDhnzCtxvfOWkU7ezgo+exzcTl4SSqwOM+KWp3lQodktgRUBqXAwCVuplKkN\notYbpIuCrz/yFnmB+qV7TZu45Gxb8PELDzUnHeZcqBTx15lI752FCoi0sukH\nVjsUEmCdI9NAo75wzwFOLztjxtDs1pFd6RJuULVAH3fj35WF+YS1yT4iBtPG\nD6XuCw/b86/yh1+QM9wayXuBh6CyxQ2rZyO1VB5W9sk1Rgy1H3fu3Klid2ey\n+t3PicMOslF6zopqQ3UMnvB6qdUO1UfgjfwKGQOs8Is1ADLV5x1xFwLeHGIC\nGLRdcsvK2rjhUj3xlvIOlcwUJ74vhPgSMkXJOZskQOgIuub0SamGLn84J0NE\nlYFpCJ8Ypl2mOCngxyFnZKaZM9++f+1jFa7AV322TFq9xBQLBEdv4s9Ro4fE\nM+lK\r\n=driC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBro5N9j67K008iY8+MG45EFMF/xnUNRhEsDV9794H6OAiANit5ggyS5RTzZ5j4B2O7EPIYKRKmVc9DlRsU+WWMSQQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.b74ff19f.0_1586981077780_0.7891449378033653"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.aaa16853.0","@material/top-app-bar":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7546404b77983a36ca5e25efc1078681498f260b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ni5hXpUTW6E4FX0ov8DVgVYZBsV3VlmqHl5TmLY4D/Jntl34ryWJz4dN66OH34cmD4rbDpTpeH6+M+iBGds3lA==","shasum":"d1bde2826c6a0129178893eda464954f99082d78","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.aaa16853.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel42LCRA9TVsSAnZWagAAlloQAKLZra7ZwhjcybLMN0xR\n9UtZJujW8cdwJJJDCIP6NAB//hszA8XvHnTvc5AV8GmZ2+H3bwIvurvj9mm+\niDNzuoOHF64Ft8Xf9OaRrTp9HkGvDsX3Pipn/5vAbCWHiSk7W29A10wHCS1Q\n38X9+FoxQGpzJ4pmSse0X1+0QuRGER3jRo6Cu6xWn5U8qpLry3wVIahFU3go\ntwvWb5ndJ1Ic4xthn368R4N1fgSUJxAz3NAnqsWhu6iaj5svL4eS7O5Cg5r2\nXdmuD+1Di529Zee/PxAbfVe0Zi/NnmZL1YUGKYnVfbDG8VVekDdRUoFtWJcj\nVJsC/q4B7jDX3eQQmiUUBCGeSWyGtIGy+/y2TQJ6FrW4Kf5mzeixKhIncSgg\nL+1HdSEHW+V4lyTcLnbg2fnXdo0lGi2f0NFF0KDB8MxC+i2VzwNopEqHOKH3\nW3xgLQ0rlMDmQsJkxxAR7r5gLSwIElEC+hgd6orGrIzeEo9rC3OGOaIjr8MN\nyE/1OZm4FZLsKXsIUkx+KtVZw3yw5PPquEG6kIR33FE1kh7spj02xhJfYgLE\nqKoKal8uWZ+TJfJZmDLxgNt2Ri7ecejpFcm0g1vtx9TllvKqCkSIlFLhWpKf\nMebJABaZiy2B+SYq1PmieGIj3skSz++Bm/D+eAK1kbwC1OtpALRg7viaId9w\nMxkP\r\n=oUe4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICFsjQKSb9aQlHAscU/mpT54ar7laH3xJ9weyWbuNm1YAiEArdR/GEOI3fr7Vi9Hvlbughp+rHMGGafJkzcDD6g9g9E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.aaa16853.0_1586990475480_0.2431618937037605"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.826b23e7.0","@material/top-app-bar":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00403df32c75dc9e2a64a38be1eb1df45ecc57ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-G1jIYAKNocRuoERSfS2cJpao9D7f84fgycEQdPMVDoJwMKfx/u3CMQ87O8RJqwllYHSVKCqF6ioWmujovlnaIA==","shasum":"c8bd12e4a02178da2cd114425de7468640d4f863","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.826b23e7.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKqSCRA9TVsSAnZWagAAeNEP/1EVb4Ri3YLenijIgxb2\nPFFoBfUmIR0GMtBGhQSoPB6NQKtLd7vycYUr8+IQ5zsJqrLft18qZGbHNMEO\njGkd7nF2gD0sAvHfYc5nP4kedGYhYT+YoCL0BPOrPIeGgYGFJNUOel11awBB\nXSAlyKsKUad6oK8oKB1jsFuBztJZsH01bRy22dlUr8+DIcnulCY5KtRJCB8z\na6WtFM+7p6HQf04p/4ApYQ5qaNaP364YNAK2pT9ZFwMmP3xFOcPeI0RyuPu6\nhyLRqFIHnSRapaTHs5jAQMymCqXn88wed5LwuqEoc9M5D3+12xbCVqeg5/z0\nverpVEHCtAf55asNTk5FguNtsC5VUCSzgkcpso02v4CkdZ/aRLVMjpI1Pcey\nI9E1YidYFZhePJlOdaG/osPFVUoovILR7hqIHIZ0aWJCWmWwzOlivjYUpDi4\nWVYonlAyclywFsPtdjArDUrRj4fWF0vLJEdIo2llbHGobF1uEwu943d+NRD8\nJQrLSKhKlKXCjKOiAux5mV6N9GTlxhI8Ezty2tgy9QvlHwrJcSgDQbB+ECEI\nQ0IxwND5FW2fCMkR0z3rFjH9S5lgKw52X6QH43pP+lrmW9aaPc9/G5lbWYcn\nUKBiUK/q+CBPIVzsOThUylaknbY1Ylws0fMKK1M3Sxgk8IwDKqkC7f31Kgms\nBDXQ\r\n=hey3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2CoK4JpdI7JmJq//vFuHVsYJ1VXhYxaZcj/g5Zj3kyQIgItYqus0AvWvXVgHLB69rKT82FN9VO3b/DhGLNsmpSHA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.826b23e7.0_1587063441896_0.49803962545147673"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.e1ad2b2f.0","@material/top-app-bar":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"148a509de33ca1ac17781a9e24bf8735ec5b2874","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VpiPqiT/6G9CY7y5+CVN/pdSSGqFiIAHKBKxF18XS4iuKVbrpBA3rs6tBZJRQzuirOT6msBPk5QyIcEikGbiiA==","shasum":"0bb8501e053544a87390009e71ffd27c03c03939","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjVXCRA9TVsSAnZWagAA3DwP/RulbkvMo1IxbLN97cql\nw62+s6Y9vxhidEyz8mrfbruJ9TjGeE8k71In9gJSQmDwCb0ynNsSKV5cDUSI\nmDIrKHy5hMq4truoFJEZhsUuiG6DWybnKSGY5Ngif9WbUML9zwrK3o0cg2MZ\n7fH2z9evM5q3AI8YgS/VXhlQ/xFXF52MaCwo8uatIfgtIAWWSFzA5T4NJgei\nU9ELbhH5ITRm2L2r7WNRWOltabxziz9Kf0AuJUWmZ/uaUDd8IZGqX+cak7tD\nLZ+rHsxfi3iYWDbVP4h6rhaROkdIMS+nAUR50A7agFaGW1CVgDyb0u333dbq\nHPIhbUdIGM73m893gxdpf5eLoh0w0fTdiYGSDZQiaE2ekXF0dp3h8+W6liC5\nAtpq66zQQXaF4fq/jAt07S1SlTbD9XKPoAiSKmCeMWTlG9hsnLmnYwyuHdpk\n4PxdYfjT30INgi+mD8ZFg/xrfawrvNRYodS+nvCdcYqIE8fcUYSiUjg6Ggnb\nLQNpcDZdgRfJToyB6lPYjAIduwb9zEvHtPiflPNEvz1evWi3SxphHwlZVAFe\nPv3dT30oDPcsOlemjssINTwKluIdM0ZLmVq2dXnCYCbNhvdWpv0wjAHQUr8s\nYvE5qzr0mQLJEZXPH4+sPXeqFkSTBx6xCY29MHmXPb2SCDQVgzW8uHXDCjNm\nTrpR\r\n=Vvp9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFsah4PnBftOYUzXlXeyGK3ZzHbnF0hpoMDsW4A4Qnh6AiEApbvES4XdDOw8kQ8d1Y7zui/JRyNUE7V6ghs4hHGcQGg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.e1ad2b2f.0_1587164503193_0.8891076499307229"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.bade5580.0","@material/top-app-bar":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e463a20777b8cff5146a68db7bffe3f5aa9674d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GrzZ0vj3AkqL1uLDzBELUTplrFxOgPCg+H2yx/pmdkPKG32csfG5QuUIuaFYniB6m990E9xhqMoDRdDnURxtmA==","shasum":"de569c07e4988f140c8e3406c1212bc68441c351","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.bade5580.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjmDCRA9TVsSAnZWagAA1FEP/A8xZSKN1w2q0UvNxz5m\n2a4dOGjxaCR8w4BSwD/AxZDnyIK1WbSrosmQAADImG3cKEO10+5He+wxiCIC\nX+1bvsay0UIG0zDYoAs5GVSdNHC9u8yLEG/0invr9M/DxRF7OaMzF7IVek5e\nASYc1Sivz+4MkYnwx7jgsscpJUfYRO5aiN3P1l3CcoYsgzqS3M4VVym4at0R\nR7QHJPzQznqx1dJxra9G1Ne+DBj7rJp2mndOruOhIZejGkcotT6rvVmwM8qL\nWATCElOcP7eYJn5YxWxDs0m5qvBmAgOEqUhJqp4FmE4jL99Ns8+0yCR68JV5\nWHfwPdCa4hJaD0QOly0JyHnkkMteYafYMk/spheLnBSr8EetuMAP9lm2gIxS\nKGHl1tcRhNexkwTKoqR3TQe/bNVEWcezdNAtN9GrzdWmUYPX5EOtexlBi5aF\nb7CO0yAeshtJH24+Obite4OVn7suDYeql5sOmLl0FODEH9+Eo0Sb9Z6lbxYj\nzrijakZ2dPtUPn0z/mAbuUR2i/sZ3Z/LHeP82KFTBalqCX9uw/5BrSdtvV4x\nbQke9THSWip4SVJIvMolYvFXAbZGWAlLu899UmEuwaL4BMckvDmx5aKBfglg\nnO+ZAEpkt/qDyLWJDBeqzQ4HWVVX3UoQp95hPifM3qJ42C/X30fF52DrOZ/i\nTyi7\r\n=R0Yn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbmNCbrULOPmtZ/RW5UOOjJt1xUvHlCdtWJJrvDsnCxQIgG92zxO1kQPWoSnWAl8CxJQiBLK+vkpm61STPTTPobek="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.bade5580.0_1587165571393_0.6933450302337127"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.dae38247.0","@material/top-app-bar":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b704c816f10599ee9a5d9b89a55d9c95d2e36f4e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-N1PUE+DojzsanA2XgNkuXbM4OnuUC6F/pLnkmizqm/k0RltCd3EnkJolXKbKo25dsqEyjQbM4Bux6u4Jtl8TQg==","shasum":"ac0567297cea2932a7b46d18e2b1ccd44f663f6c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.dae38247.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkbYCRA9TVsSAnZWagAAMVgQAJcT8AUWeIKGrT5caVGp\nvuItDl28gL+mkAT7z+IEvI/2OaxSdJqWtHKaMWMmo1/m/CtETuXEpLLs7WZ1\nGr2XzM5Nv+81/soc7d3wtYC0WVuOQsSx3eVw+fnXdjqF7fBqLiQZIqhOn9w5\nHudIsN5JZYiQPNAtF6UqxLRvc62z2lPgxVQK6iD+NxXMCCw0v0XYijV5/+Rh\ng36RICPeFqJ7YNbLR7bsQRh5/UEhzAPG0i7pET1lYimGJLgdLnIhDMGpnqjC\nebvVSzNTArCXjeWlpggEOBNICpOLHsyg5uzH+dP2ZXDX5fnh6DKuVRZLKuB3\nNTrEeCSQwCIKxiUAy86pVIvWDJh8hmRMCPZMwRiPjwR8nmBw9XgKWgydsnyH\nA5qonnCf7bjlRFoEYBhRfSCoYPGm39WrzPRmF18F522iVW7vo6/hCgs/fiG1\nwhCoNVli+NkvZajAUBPmUq4nqxIUdu2pXtIXyC17myn0f+ZexZ4MEq8Jgi7N\n+QO1yHm5XRTcqCRZVX75gQbYCboYCa8/UfFnM8j5pbqIIbBHB4bT56uUB8Om\nlYMtAoT467IenjmRS8NeQ7+JN7oeiybstC3Q1PVZ7B9tsdRGW+qIYZZ46zlt\nX0lYXnhzDsJnoplDp+Bz4QRnZaPkj7f4b3X5rplobkjqbvAtRvLu/MveeRai\njhtc\r\n=VmLu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC6U9Q0C/+uHWEwsr4eUOOvZwdZRiGfe3fTHaGgXDZjKAiEAkCMhGAY1CmIu09/H+PUdBGPQ7OKLoU1iVfPKp4JHsRY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.dae38247.0_1587168983933_0.7156038283755344"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.a04c0b82.0","@material/top-app-bar":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"23904437ed2cd67305827b08d512e6dd06858b16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-jWWnPJ8bbd7kA+KDa2G1+W3tODpso3YuZFbqJhF7v7Euz6JYZWA3bgG3R77BcgCIaJH8Q8YyHAFAQLmNms44lA==","shasum":"ec6f6ef70a92dc79a61d60622af479d30e36edc2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.a04c0b82.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemksZCRA9TVsSAnZWagAA0BgP+QCaOZFTnYQwBUs+i4f7\n/FRm6utX6zfj3/YN1oov5NMNqjlB08SnATeefToSwBCJYzpMwWGty+kH0hL6\nAFBh1rbvI9braPC5dPBIEdBvEhmgiu8Es0JLxSnGBC1jogIEMLSmzAaLn545\n4WSvpdDUaAZYJL7FXp8AR2sSNQnMU2qFAa8dXTo1R72IF6lxjjN76Swx6MGw\nb+1gLW/pGU22VcFhjCpsmdN5uMDeKP7j/2e/UKPW8g4JV2G5ODPW5OiuzeoO\npUjfOfukFOASumefIW5KaMq31b3T83dpNhDRs05bUvBRFVvJAPXokJw0Wcax\nNQKuCE4io3khmMeo8MH7nqaTPfrTXeqDOyaKM5cwBCwRLIMS1G868Mqy/F2L\nNA+hyxX/QtTA74h0qmcjqOoKgPN/qEodd45YysSYut22aMup/ZtUwnngfKyq\nex6UbjDjWttZyTqk3k6hgul5esbM9HVutF1XeOof8msp2V+GPU2yT91XpWMU\n/4NvZihZ6IGsa8EOnk+k6MPPRONLSPqFTAifvQ+zz0vXPmWNGXjgccIHPX9Y\njV6cLWHM9OK7uvVh2/umiZ5bQzF0EmMD5jN37kmZqjwuOyxnKJr95iAYdui1\nNDSUcAV8Qe0Ze8x3u6H36Es7FR5lBeBDmUZ6qSPf/Y7jMrSx0xTaK29zfkWZ\nnPIX\r\n=VzQt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE7UEXqcC/A2a6qUt4I7JOXR1eev+/m+QtEWK12CUR20AiBbZju0PiU80XCgF4vE/wI26VoT7035QAnUPWHFET/GVA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.a04c0b82.0_1587170072635_0.8849681728990257"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.715decfe.0","@material/top-app-bar":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddba034f53f308afea3b1390f775b49e8a473e91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TrxGYdrPeZH8oX0xUzp7NRsKaHeEJSnHqPO9I8JbxLQnQkMrpj0Ainc85jxf1K1V8DmP9/DNIM/9YEtZybLhHg==","shasum":"ef57c4057eadc332b65dc83b6bae05e4c06a1cd5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.715decfe.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenet7CRA9TVsSAnZWagAAaxMP/iY3/pk9Ua8RD1eUN4G2\n7HAV1nzcN4RIF1Gt2LvFUijoJRyzaO+CzvvYtw66bdZ42pcZ1JJsDEHYZ3lF\nFZLhVFCGXCHs2aAroWIzTLqxrir44SKXDKBkprHjuQ0O75mAkqX0GYNt3zhS\n5th9Y4d+ozwrTIumiMGum8fackvFErDjsv7mOXnWs63pCD991FNLTDkgOmjd\nw4SGlHlphP2yG4v9A3tMJdTLbHvGztVNNccozx6cM/UMgTrrytDUy21mLDZQ\nSFNLQIjqWsgee0yRZJeX7lUwfSnJnEuG9otz5oik9ZyIt5PNDe7fspAJ3mtc\nY9T23XasBGKAm+6t1GAh3V6iedprEG3Dw1s0Ag9BBDQ5KdQceyK4+mR4zXmz\neh+m31xCPO8p6n4BjQB7VGSFDOSACNvPOz56jUr/jPqD6osj+AcSg80k2X5K\nqWKo2u+hvXJS7bNinugMrx/kLaYEVZbUlM31dGK6M8FsOeVK64UH4n8RNxoK\ngJyWMkdJ00XExQMlO941vh+7MOHxPBDfEYKCrhCws4yKcMl0Ypod6ewBJjbK\ny3l+/GerQ9mOfp2I+SOxyZIZqOYJ4B8FnB61aq1o4YeQaRtz/GVPpz/RJaSP\nWw41TDOOni0Qym1jKba+sXHwluox6KVBtn5Fbhv7cdUltAAGiDinTEsQmf25\nNndZ\r\n=uI35\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClNFO+4quqtm245sj24vnnLfvMFiF+tY/L4laxkTWoWQIgDqKVahasCNejm35uzDjdUADG/3vlu1A9SdjCxlWgBKU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.715decfe.0_1587407731428_0.8418641234832904"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.c862cd04.0","@material/top-app-bar":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59b73d92f5709c37a2da654102a61dfabe148db1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dlsYN3ePMtbY38Uss+ymyRsLwa42G/NhSyIiGtZWGTuCmMdwe15zJnZQicF/owuayYjw0p1RyWA4q8ZHSkglEg==","shasum":"53187128a2f50b525368d94286b24ea250bf9e17","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.c862cd04.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhVgCRA9TVsSAnZWagAAezsQAJdcoYgDzIzNIJe4jORA\n4SyTez8ePvgE0oVvPNcwU3sh0QXbbL6GE0jSKDvr1nG7QF5jollsTEVh4Td1\nLYV6XDI3eP2r751XkRE9ckka/UXxl4GcyCKBKsgRy2ubHuEyggYpETpWgwZ/\npMFyi0zTD3lEJBmBAnOkYd2xtI2QyHTmxr1lMkxRnSg9D6as9aJzedmnVJz2\nCfOZpPVeJBFXlg1/3Oeh7FRN1tS3pOcEiB3F3LnzmhIRLyxiPWZ3pXQW+ex4\nnDtTPY7WWBxuoZqhZeQ3P33nyiSkKFmUa1ragh4RP9a1vBcZItCbPX5ELyoW\nqrVGI576G+FWHtiOz9okxUa1Yk4K6h+4JeMf4u0irGXkOhT9UK26Pf3+BOR6\ns14m9P0m1n4luhV+u0u3uBEckxl90SQkSzhsQLBJUnXjkxDRnFzmSWqO/Kw+\n3ivYfxYQUqIhAdn9PlsbjW+X/Jb9WAYkWuOFq9pBgMxHXzggH6gxi66b+rUq\nM3jXiQsngMmvGic3Lu9gEyZaVRBplbrP9YqeyPH9T1WDtUdId6TCm9OnDimk\n844ZIa0xaVkcm6P/VJcBMPNoD7pjLJGnsh5R5MIJPwZyr76A3jCguF0mPdla\nfSK0+4O3p0vIgXa2/bDaxqd44IUPIn0O0sGeKbzZXAfAgAS3nWu7oTvFP4jd\nzaiw\r\n=vxgk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwMTJwvLhwy7rek3PRS1+1iaFr5op/eJ2cOEhD99jpNgIgVJsH2ru1zAsqjhR6WpZvSzP0WPdDB98K/gSBjDlbHfY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.c862cd04.0_1587418464472_0.8224420468401406"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.e9b01b35.0","@material/top-app-bar":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"873703765efd3bce3e325a39e56707cb2a7c47d8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hBOKXpHCvr2k6fdPCMF43OQrm67e8axrwN7qcTLR5dp1Yuwu+aEYFLYe0OjsEcwxMT8T/rD7945DID71W6pbjw==","shasum":"36707536d7776b6107189c3dbdaa356cd84e6322","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.e9b01b35.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBmCRA9TVsSAnZWagAAB8wP/AiLNCERAL0c6Yh1/6mb\nCXLMHn68vq9WMTXCMQUhojv5J3kBmDvJLoadRudguAdF6ncqPZEcW+AY+O3L\npO0Ob+Sp7lUuAxBAa+DNVePAcqPF59rXsVzvN9MTIcpCfHluR/zXtPL9Omcb\n8QzuXXDNFd0Gbtiiw6fhFB/N69EPTWNXLBcgH1mv41LOLAW2gXjdBcADcGs+\nGWSjVT1UEJkCCJ0cvpCtj5B8xt1l3jTpGB8CdlCVutueWRWQ167ACtYNGiVI\nexBjhR6UH2wCfFSvZEtHdqE2NTeCqOsN3BICV8b9JM2PHJDpakhbVYPVGa9f\nNFF15U5lLivuxMWEJDWalpkloUHwS5q1joGl5d0ZkqdraCrYk7fcr0VSBDwU\nahoL11ZfqH9X9rZhpHDxHRg9wTWJuH2Symlu4KyGiGVgDx1k+/B5uCZNxIV6\nq5UWIVszz2gn60ux7R0HlONqlc02F+36mAVjYXp8RtjnSxf2a9klU5LgXSzt\nQHpYGWluaOlt9sJxOqZAdWS29BTfU3nmoBXlxcqT+iMUbn5RNHaktY0WGjcM\nMybWucwAECWOd9VNQM0ylBRZrqn9gvajnSAaZWsPWz+CbpuFLbGxla+vAsNj\nZeSzAyf5pefERk9ULez+b3ehlwZvvXmgdOe4ZvHfNhoFT/X/E5CTruIicYd6\nUAg3\r\n=ZphV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCApKJ24fWVHd9jfPvGuqkMjUbF/Xq0MdqyAxW3cosXgQIgUvTpLifMAUv/Ir6jlUke/01uRa1wwYyyu1o8NFaNq/E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.e9b01b35.0_1587425381999_0.615175753305615"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.ee7e8989.0","@material/top-app-bar":"=6.0.0-canary.7b4482402.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b58236c5ca9326b11d092c5b9977dbd601298a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0ra9891wdtlxm28YykTqC/P4myQB2IcEKUarsK60upNrgmabxIF50NZLLkH5nNgj7vHBNp/Urco9v/xh9HOmzQ==","shasum":"d667eaa7cb2eb69590e403e654e16578f52fe5e3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.ee7e8989.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkOVCRA9TVsSAnZWagAAfBMP/3xQR5I+U9viY2HOSJ6/\n48Cp0upBUiV3nd5Hyig7JrZfd4MnF72BQvUX6Osju+6bCsE8jmUbzBuCOn6D\nTMWR3eiAXOl/Yp6Wg4boP8nbGCacJvf59lUSnitwZFOCxEIV2ZgknC1gjLRq\nXem9bqo80BsMX8Eo7GQx8ksM8IBWzl7vCfcr7KfjbJ7jwYH03JwKvx3MoVGe\nsgBt0EkAgMgu0PZxkXfjIFPSwvOw2+KINgURo8e9OVLvtLcyQovASkTt6PUv\nd/ODw1PsQQb2glxRF8lxwGq/xnulZ06ReDTFMRr7YEGXKldhONTSH7+1LwfM\nDWgmxKcwMCuzFz+k0kyTWQu0xoaqy/0fJmQz1Pvg8v3IeEEAog+RBC3TC97f\nqYPxVBaWqCotvjylNgVqvGH78AaQIK4nC0GFaKeC6WsvRkDI71pG9TU0aujY\nt4sksSyn1WDPk2kAsVhcG6hJxR4M90P6tUUYNHbodEEiFhusW8Gq3rLCopnv\n5oVw9VUxt/G5SN1SxNX3j0iG5UIg6Fbw2wdXjH6oEr0oYniA82ao9UjYUpcX\n5SOuBqAjfeDWI6JwtKrR75L6J+EZv8Mt/ZwjIPcoQJDhsimvufPAO8YtACtQ\ny8OkIBi27iYUXIcvc2rCDykkkqddMflofA0Dnza7Wb29fFg20NAJTGcUWa2t\n1IsQ\r\n=TtnI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfune0dPbWov7EayzhVjw+A1vM/4l7k9cXgQGBtT4rjQIhAL9effpTZH4dt9m5IOmtQTYaXbZG7lHDJUzuEWTtnPRB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.ee7e8989.0_1587430292805_0.4329916140793144"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.9bf47ffa.0","@material/top-app-bar":"=6.0.0-canary.deda86d8c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"282e30290957ddb18c6119523574ba36c65d7abc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DhxAbwOMUQia5GNMyGBi/AKKqXXAJlwIivuP7ohDPiAAjGrN3QI5nfWHCg4S1sK1916On4XXui4LUDV6a7hgXA==","shasum":"e985377c37ec853627bfe21277daa43591f7b7ec","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.9bf47ffa.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz2jCRA9TVsSAnZWagAArpgP/iS+NjHCgm1lRZb+bpO8\nf320MFe7+9rxoNhUZKwW4Ig9I161MdplhgTi8UCp065spD4sjNrxcGCFlN6n\nZYyIPqApb7LHexO6MIvmKeKCXivz9Z7cTCf3DHbcwx2STB47Tw+jIyWmNdQm\nua7BNOLJJKQAGy/s5hFRR2jUyedaQzpYLhYt2qplfXks0AmXoAHncv4xyiOR\n4PXr7WqCnzjwozkRmc7Ymr+QvkBwogLLyu5955J4itFtfEIQ/Ov2nCzpo7it\nEg2XZefE1fbwF8S/XR8mLTSqNTN8twL2Zj1Xtdo/N8/5r3GfnbkwO6/SChbI\nDvekzfhPVd/r8RBIO0ZbIfYLTLKQgjTtH4kzuOPYILsnLDfZz9nNBlbpigBG\nmu29GsJZFK13Gkap/oWiRY6mWQ6jOYUYQ3dZyB3J2jO1+Yxih+Q8H9CU6mNL\nQ7EkzH3IwzRfIVm690pHsq35dYppEJaQHSrvERtv1kIvO419IaJK1TTnzBM2\n6gsEK58PiQsRI1fw/kIOvhMpXd4Dc6MekhGd6AEBRf5mkK05R9VwJLuSL82G\nMPRoQdPKcAUMHL3gEtiD895JULPM+CyMfXzdyPdlCzXl1tao0Gg94wy7DFFF\noDGOHerhjiVkE5EWGLylfdxwkZEqMVkN913tWSKOQaIMFvDLdgtD+ex0Kw/d\nXFnC\r\n=CtfN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDvyMKeiqMNexZeUNmDwlX0DEqkfoGglAITdv3sAiV74AiAd6SiYwMQz7u62P0NJlzl5mkhF5lLTA3mnIm68CGFp6Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.9bf47ffa.0_1587494307013_0.9110997744399123"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.078dbd98.0","@material/top-app-bar":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a45b9b95a7710162ffb06fe74053ff1d108d5684","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-B3CBzjvyewO8E0x1G14j94gmd4VNAHDznVTSSRrnv1IeeChBiaL7lRtDQaL0dgh7/D1bP2bPo++e0t4aHyOBnQ==","shasum":"191a3506b2cb5a6a9ceaffa7551e72c63801da6c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.078dbd98.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2HACRA9TVsSAnZWagAAMFcP/2y3ZdEal/TgXxQVAbWG\nvBQ1NBEHtwlUJniudb+f+ekqmzVBbEbwZDZ4rjLtTZr6CRqBPdknKIudV6qz\nH4J808aSDU8rouOlTafCg1nVrCOYk/bCct8XvWyKEY15gBKzWkdIzcckSv6T\nTOMyvi15TU2PvYDiTVSnTCJFdeXwtU6pnkFIg8gANC3/naXoTMHuhnXj6BML\nq2OGMnfJ8dxAak1eHa0urTMMVvlXCAeIuo7c0KHXzbD/SISSUwQ3gQFr47zf\nY3aceFVPgNWCHi4HXcGphjVE1IQ7tMvF0iDkn9OIwjdMJeJvKcmHoe5c349r\nED/hO2qEkcKCQgw8sKzCGf5t9wcZkvn71elIQTV2qcFWasbtpb1hdXINUNlg\noqq5qXaO6V5uDK8SqUi+NX4+Fz68BJLY2/nJ/+1MSGxXEdaOy//vxQkqpBUL\nfPd+2dXDBaUG6d+2iChgzeX/0Ps1MF056hi/T89qy+Zw4XmsGQN/0njMwPSp\n4gQwkPPLFMcmx/+nsMGNMo/lcEAKib+Fr/lDaMRY5ka96uQZVe69qmIkxr94\nSAK5N1+KS/LA9N7lsgV2zu5HKYfcFg2rTFFwaI9ZgnZHrFFVUDlo6kqnofSx\nBW4D+n3ai/yicwyqfg3Dzm2S3dnxkybyHmQ9aS+VdphTy6mDCUmSE57Gvuvh\n+88n\r\n=mcmO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA6ZO0SBdoammYo5iEs2aBGgs90YZrJiHyLf8hvCiKvRAiEAg0TevenaVK+6p1mtqFAn9Ez+dIGQd7+4MUf1R8+4aCs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.078dbd98.0_1587503552188_0.21617850635257452"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.953015d6.0","@material/top-app-bar":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d875e6d658b1a3287b35d2c77aa8274d9828fb46","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FurhAjtyvdROK2uyS1CDCkeg68JvDy5sgjgCk5cGYZxnP0VkotXIUqcBzVOUpUlf+SpPKXr+GITWrtf3t4gWhg==","shasum":"62920f814fae2ffb416a83df87c8b3a89f58aeeb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.953015d6.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2c4CRA9TVsSAnZWagAAeCQP/34IpQUHAobHe7GGK3/s\n6jozBAjrn4o0UW9vSScnRt171kJmfpdHHY8MhDnr7f7WoityqwbEZeYSFtAf\n2F5cQZUv/mo9l4vWtXN8SI5x82putN/6Fv83bBMql5pOP1kFvxmB0BYym+eV\n4VO1IC/ly75cL+zdimmZ20gpwq1GDm5EpvAU+6f3DFxTSpo3y4T/Jj6Dl2Ww\nlfK73o3CKsyPDBZ91jfFsc5yOh9qR4j5SGeio9lR/2dLKZCVEtcpSLUnjqM9\nwW2UyUVGSZOAbXMQcmWjIEE6YD85nDWUVoirWtdey8hFGsAcq0I//fMCi986\n3FLP6g5eZh8+tPBxfvXMHzY7n2x7p+UUDIMbwMnUFhaBK7D72zz0tHXXoY/a\nWDjLvRNSIV6f8Sgp1cMYSTgWKU1Li/cHJrnDDHXMl/IEGptLkEDo32iSk1iJ\nB2YhM9fdw+GC3mqcR6znOJbNGDwcHwGvxHehoV3oEKVr42rzBGozrAbpz88g\n3ELSsLoWKQ+eMbYNXeD+D71txymOi3AQnKfjyJgr6bZNwbBe+wRWfOF6IDyy\nvxVekNj7ptXJJY2Ooy7SAfQXQyFfsQogZ8y1D6wuAxlxuNgAz4ds3k6M1f3z\nqU5hgrVqj1Wfc/7JDCBEsPg7jt2WUSDfN/ZMX9ipehkyVM/OWVIeBpJ/uM/N\n/dFm\r\n=h5ER\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrVgX7OBwld1aD/EN2P0orAojfaKYxgiBUDbsjS/v06wIgBXqRIagth9+Svyqtl0e5aRS0tFNsrn59SSjK3wH6JXw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.953015d6.0_1587504952444_0.5089991947852865"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.c360ec63.0","@material/top-app-bar":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5147ccee26bbbacc14a1d7d86adb845ed406bbac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9+mQWTvdwb7wO0FsX+fNU83JMFuICLaiUiJe/3318JN7X2gqcxHYmHJKCz4EQyvQ/NcgTCLG4/X55+D2+7xhXQ==","shasum":"398940411aaac15801a47b492057f22cbca7668f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.c360ec63.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2yxCRA9TVsSAnZWagAAThcP/040raZyi5qSCmbUArMC\nV9B43HjOl1FKoirixfrlYzvXdmXADCjw4L0Ex2PQDQrEmJKNUTthECvito9G\ngbul+9PCeKgMh4t4+9GCNme9K0hHGMIlI+7KGpTJ3xkKXrNnqqJPYncx+EX3\nX5Q4QK0Y+rMb+j15S7i6F12JNXOLGqLcUa5FQGuloi61gnpU6SWrbOTcXFGc\njGUXmlAlJBx7k5YftYN9lqrrDuQdOrASYwNKcCBooYwzLW3XWQXNyw5sy68L\nd82JhTYcFZbQhTpqxxwlbtr1LMAZ0geYPNrUBoAYXXCH2SqDE6B1/DPJc9oB\nFK5AeNqlv2splOQf+5ld/hADAenAUUjkuDC+rR5KvE5mefMvG33/nI98afFz\n610fDctnBUlNGE0FsnAGfCL3qT10Mx58Vh6/dIbE3TZ6/7oBSWp8zd/ql4/4\n0vlewFXi5irR4hMa50CsIe/2ocQ9Zfzo8N4jba3upP5gWXCJ+NSVxplVz/Au\n+ZK9NvteiWMY+dLRnybQv6GlFeDlAbqmQ9UWMgjG89RmGdXUvWroyIW57WA6\n/O7S40kLMpsZq59kPhtnuJMyqNdX1Wb6PaMrFK5n8wM79+P+dei0cwBuHTcu\nf2g9NMLTYmFVTPB8qoUzrZDrRuH5zZk7fyXaDntRY1BTa++wnNIRDcvYvSLN\n/cqD\r\n=AaE9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID0AmxD27y2E2q0SWfPSImo5bLvjcyLu5gZENNEimbdyAiEApGGPbSOJ43Prnc4FzoA2nQSnoTCqXKVn0iSy4h1bVJI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.c360ec63.0_1587506353319_0.7200460144496921"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.d71b65aa.0","@material/top-app-bar":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f57992160b26bdf181837dfc0b0ccac0425b3a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-IsF5Cn0UPoOIMuqOGTDTk+YkbCYoUpZ399kf1M41FX7t9Xn3ezEdkaZGZQ5at6bFW8df0nVvT8QLR1NEeqkZQw==","shasum":"08c8ba160e6d594f3798f9353cdce35c8acd7341","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.d71b65aa.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3XFCRA9TVsSAnZWagAAe70P/R1x7ZWXWDEmQC6LAln1\nLqjv+Xip1W+Z77kWktIyOzNzNdq2GsxjRMA3UUOVnG4XGshlUYBZvIGBcDu3\njbrWhI63H+5u+m+BcGE8L6leOy+AA6NhlHfLPjGXQHpHWByrwzvn6icvwNoh\nFwuQqVJBsWNRK44jyckrYV26/zQY2+zsVdiBkh9BtbWeJ702pusbbW2rFK1I\nz6mbp39hCCld4KQ50sQNmdm2g3ZxAM6iXup9xCDT4UC1zB7nRWPxkKfqo+4Z\nuc1L26EeuGRV+ORcPrjIE3VMvSCu7UQCI8SFLEmXUsmLizONev8PF2MHp7DL\naraOrYHVgv0ULVlb2i2ItdmX43zi9O932ZKF580t0wbzNQdnFD9P272zHOoJ\nbsv+D+kRFL/677PJ4AkhIPEDVV83PxlsDNXSFMcpIZHR7g5sJy/o4PkCRRLX\nyif7Va7oyGglETfBAW6IqiE/atiWrKtSVkNCjLQ07tXiLJ5ziD51SSwucxte\nfNisDN/6G9Nk+Fow3MJEu7oIuh5gOTrXk1712skrVbkAhyp2CLR0dYRSEq8A\n0DhugC71lcK0UEVoAZ77aBNvh0Ke8HQjsk/iktzti92x4SDi4DwpJoCgL3g6\ngVYQXFBLpGFQ/9FiS2GT1Ol1O5QmZMLOJTVCmapKk71xwWjV0q7rNqm5vSd2\nGtBq\r\n=K/0m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHt1oKvojgm0lQ0ZHV9hvjlMk69+szW2Q9Vlciguf2PhAiA1RW6iDrmoYUmr6SVsVXGzWICOw5E+gofOm6fawzPfdQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.d71b65aa.0_1587508676766_0.443659159263986"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.58d51135.0","@material/top-app-bar":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vwIoKG9xPAk7p6uk95t8pDNRpUwu7k0aPJIIC6uXBFQobuChPXmBVTEa7UwqzVPBDv3L7qrqhoD4igguloRgmQ==","shasum":"67a5da4a9ee73b1fc2d224a7e0dee799fe4b76a5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.58d51135.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOUUCRA9TVsSAnZWagAAQrsP/iNipJbIXTXKy3wDQoqx\nEiLLE0wM2PMvjEqCIl3Gy/DvLq8kmf0kPH3FPmkcbrsrc8HKOTTIbi7KMh+w\nIRHR1gc75EzuQZORX/pxlXyYNONp0XkGh2VXlbBWmGIOfPGbpMdqyq5WMBXP\n1I5HvGy/iivgWOwpZJVooYFpYfd2J6mDINSpSgdrjYhl/uK+MYUB1LDQftOI\njk/Q15pOz6ZJktQGqS8e1ZTltZH1OHZYbJdOmVdYXvgSwCFrHD/VAkjf9UXg\n/Rknl+mnTrGzbuX4lcRL3p+3bhGbhiIlkwQi2S19+Eg3fC1nHqIo6W/WgrT4\nhdCx4B7QRPqxqCsN554roomGW7B8lY/M7SEAXHQHnrsruzWWtRMUzwS4ylGc\nrV8/mVgvqbLziEMJRL/qzXf2P9YRgAZfFtzSD0693SX0/ofpBTpdvzE/CEjH\nBfA3qQKzFfqSh5Rr4C2QGtcd1TvMWxT/YQlKgY8HowtrSHoek230JpFZMpmD\ng85NdoUiJNSTj0AkyQvHcZ7SW8u/e9pOQbTLTnMUyLEFz9rkpxXmxt0C023t\nr90YwS5bhGciwbpigw60p7bTtr6UaDSfV0EcRvu3XLUotBRCjgLs3WY4nQuP\nCJMtlOnfR8yXqXzm9PIVKurkd61OELPquMnU3TzXGtJxe3Z9DJjDw3oxOujd\njOoL\r\n=cCFg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGeeQ8VO36HeURniIMUrEPoSAekP/VzU+oxyKe9x3oCeAiEAuUrbCOwwRQ8WdPivconLD5h5zy9z6b88ANsj2vr+TT4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.58d51135.0_1587602707848_0.913811639004551"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.d0af8ba3.0","@material/top-app-bar":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"86c71b26d7f2ffcaefe79c4882ac9867bef12b0e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5RK6qpmnoxGR2L619vTOWZS4wiFLJd5tuGJcOviR5Cbv1DaLaW34Fyurowh2nAhhhz7jPFDOUYCJO3jwuAs5dQ==","shasum":"eef33a2ac36383446cd4956f614a9f2104468de4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.d0af8ba3.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodoHCRA9TVsSAnZWagAA9rYP/1moxnPUD7KW7cqnC4Ae\nDTt5D88IVffdnh1a6LqIA9bX4Ujf+0m12raJvu8m7fXTuV/JhRVuDKXRouy4\nU4PgRK2PUtLkIWPAiQemdr13K8rx/f59GaaF/RRvyzdH0wyIbMsm1ALXGVuu\n5rHcQtycgPSm9DTxtRXzaoWybTHQ633iWy3aItcAfMEOHCodN5FiQITiS8B5\nMfvkUccZ+8sKp7VtuInNvHRsNAXgSkBpIx/zeaT4ZiQ108PCzP40x94NyL3r\n98F54F7In5FZDt5Zjb0bekZGwugpD9MsMsLxMXORzftym1+mB8zvhHq9P9D2\nG6VRL9QRu0Wf5Xmqd2luQFFSZaWAU1InlwHv+TBFDvOxshSBTKBDFJl98wF/\n26Wixz5fyd/3eoJQxGBSjFXPO7aHhHCYuqsFel2ewlTKQiIILpUU1g3TSlFV\nEJ6SmpF6BZvU06yQm23Lr/i4nJxNAhfrdOsqX0XaFrmDF0T7fhF7ngu2yrFP\ngOdPhOTw8If32247W+fkL4wYsDBcWpg80wC20M0+V5yoGX4KPX/GgL/XiPwo\n5upNfwhsvyxgBmdPkyANcfb2Nyu+SdPwybr+ir/s3F08fvo6kwr8GWGJ/QKI\nhim26JV1wq+z8ywPHA1nNRjob/TR57i750+3Cygc+1IcQZZnTymnJOt6Ldny\ni4GI\r\n=6ioQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICqXr1zPpb2e6NUk2xoBkXXmuXbvfxyj3L9BBdj0hXpDAiEAw2i8EJ7Go31ccKAwra1Hi0z/zoP8r5j+PqgrJmUuOW0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.d0af8ba3.0_1587665414501_0.2110547716056228"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.8872b17b.0","@material/top-app-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1f49732d08170a0330f9fb28f2b2ca978daf858","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Lly009J4WeoOcLBK/kQRd6tlkHgRRH8AQ/QCglmp/ExCia01mUsE6Rjfo80yFMzY/Pr4uW/dYOy/73KYWgBZ4g==","shasum":"306a0a7065f95e0fa6ec881b4609a1fdfbb99843","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.8872b17b.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof1sCRA9TVsSAnZWagAAztcP/jDti0slzV5ZSw1Ymo/i\nSToi3ESpsyG4JKsBK9WSx8D2zv/YuZL4JYH6Y1b428JsNdCKXvYBo7NzLfE/\nrE28YTg1cWKoECmqC8I+DeezIB2SqS4VMxC7m185U/A6g3Ymjanloj9L3pX4\nLUfl1ARbni7dDgfGEZZxWtwunLYXGjLbeECR+jw+aI4a0/aP/zniA35BHc9p\nIRR1Cc49xgC5xsbjvyJ4CYmbRGEQXK43bFa/YPsOAJX18gdtE7Inqryr9pEK\n5hdnHhFEESFX1TPBAwR/gA3iDDRxXKJLo23T8qGCbPn49iwXiBhhNzAcQBGr\nYX297aBq9PgRh2nwvMbE0PmfRenZLisiHd/XmuyYFNeVHGT0s06fZGhqScvA\nlbIy6imCN4aAYHD7hwz/4iocBPvvMdxExAyrkmGix/f8oAbrmyCRpQX2bhDi\n6Xe8cV6jovYfWgF8540F4cgbh2YQZyAk85GMilzNoqALq2f1P/ztl5RnM9sD\nhPL2oRRiSj76d5Wnsvd6UFFwolxVfEbr0/P+zp6U8mSe3EpCwVbSJpwio2iR\nuUaPPDpIk1nkQXweWIYATjq8A4I7x8EqWlebwxEiHvU0Fj+4dPN2jMswxeYN\nkba6EYVpRjul9tV+sPVq4/8FeOgUsF0Dqo2Xbdmkt41w5XbON8a3ozMXyxZh\nznOy\r\n=ehDs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAQN7hezvqIbySKWheDp7FPXRVEGCqF9o2K5yIB3r1auAiAJ1IfZMypKbmaKIi03s/6ADeCFij4DIGXc7wbU5RlcYQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.8872b17b.0_1587674476428_0.49992144839849084"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.eca1a610.0","@material/top-app-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0cLnr9YOR4sotqoxKOFrAct8z3lo8B/wHvKrvaEZwabETNYrE49p7LdMP9v/qF/mHWb3tl5GNs3blOgGdHiu0w==","shasum":"40560cb32268eb512e9534182e25ee0033d0adcd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.eca1a610.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogvzCRA9TVsSAnZWagAAX4EQAJiKVQs++H87uxAZErO7\npvr4HXGdPNhJAchK8hghqXcW6q3CTSdLscpAcMpLvxXwYEQpqiUouqzHqSJm\nThcTMBkP2MbmDgHF11hGLPPC6LQyek35HfLP6hPegh1uE9+FxkOYzLUb4xLr\nMglKgZs8ryhj+Y/SiPfI6t2ESYVfzWru3DfIviLtjdtXzTK/3ra0ralPXef6\n3zRI4ENaYxgpo0z3MrELtkWLekmL2gU7r+lGVfigMn4wURhvoXvqsRuHy6vM\ngVuzzq0NenKR7KZnMzl++P5P711qxwIv0orb3mSHPTqpd2WDTcbAM7ry0BDm\nx94ZcGqgqGOY3/xp3It9meGd/erPDVfiVLle9uBmLBbNibME1sB+egFYA/1i\nAPwXalWMo/7JyR5KG78KhxXh0It9p5LbEbr1kdKlKEI6//ARyFwMNSGFQ2dz\n6GTxBVtBoWBnJB3CPV8BRn5qXeIuGwFg7f0bWEj1i4KUVUPar/WGlAAfeIuC\nueE6epkAJvVMQz5HEmVc1bd5cyBt0TvC6fxMbK0CG0wXWYg2GdLv5Yvvz7YU\n/R+VjERkkOCyPsYyoXudk+GwyB/XNED92/nnHDCP4rzFG5/Bh98fFDNr6cJX\nsW/JKR0N912jGKxlhTUilIXb+5w+OsgnPHTletRpKy5FlP81S01WuLhiJccr\nWGz7\r\n=hIQG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHaN+wPyHGzOe+aUEGowNe6NElqA4OnvQjUGkjB2xn9SAiArEorGyxGgtkUYME4HR+MXCcfSJvtLeezlDUTA/7rclw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.eca1a610.0_1587678195588_0.9731716524449725"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.baaf529e.0","@material/top-app-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-XwY+YJOeNeQyX2lYY0uuWuswXXbLZQptjj34fKzC2H4DBPf+WG9usdmwrHqtBi4nXw3B70N1oDPb0ZUgnwW2OA==","shasum":"eb846c413fdde667fba5ed92f94acc62d02e233b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.baaf529e.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohpSCRA9TVsSAnZWagAAy48QAJ1nVOanWlUUqe6z4I/A\nfsvY3Unndcqwb+i8QF1FBgu5SApieqDbBKg0DsMBFB2yEzhRIZTWIPRsA4sF\nhF+Ba7FillhSbxsegBBooyZJRDyk9rGn/xfGFzrkadP1qy1kx/u81QP3I28v\njTjZUsVNu34OfexzFFN+1zup24e6TWSmZEcrvLD6WXSbJWBrxtcEXQTozZDQ\nYK40z3LwSoBMG2CqhNvO8yhFLcki2ijHC7ahBAXpDA08DRs2RVsd5xGmSsIh\nk1w/Y7vSdaMrDNBxA7f8u/+HoNSG2dO0xqh3Lb8d7XyiBLMmqJx+EqlRW1pc\niPTpI2iobQJugGfGU6XA4uW+JfjfWV1LuUcNyIgHrTq+vq8GJixUVAkI6/l2\nNjKpxyKbVgGR3ntamIS+002oEL53Nftq4ZKQJIVAGvR1RoUZxeb8bvXY+rag\nZj7Hf81xenrUoO2PLCRCOb6QfrDridlbUVgtYVi2C9S0csiwbbtbdtpvM8km\nRaXe3VEpB3EQkpGUEGNa1FEhpB4jd4i4rvED4dGhZ6Xnamc9Kz00kUsRHw8y\nlG4QCH8FmXBXTrjLu+BZu53a3jiquEgPhd7hP8ZS3Iz7gwUyaEqga/3KjwL1\nf9r9osCz1Zletmoc2rcrlcsQSP0TWT1qgMy97Ylk6giBodmTmZFTycsr1UWB\nxVfo\r\n=J4Qk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiFZ7ytLX1FSNuTJaqHN8L9LuG3cIxMbGRvphi/6702wIhAPWVlDqu1lAXNDrlKlQFwxXvN1VyXviHSRd77f4idIVa"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.baaf529e.0_1587681873878_0.812428677891303"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.7a7992a8.0","@material/top-app-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b9b74b473b6026badaf980339f4451efd1a9e8b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-XDtJeaayLQYcmCniAbj0bBJuBuT/3roStwU2DCxi2hmPcqOQTy6KScaKFlCm3yISlsFvCoe61l6JOfzhiiQzcQ==","shasum":"1950d4e00cfccfe234b1ac3060ac124a9abe9344","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.7a7992a8.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiFbCRA9TVsSAnZWagAAHxAP/jNCN6k2P/ucAd25+VXW\nFSDd0m6W2JZ+NQNhxrhgQXU4zoFLaoUlN34EU0QZEGioNAXjWsx4KuU0wXjN\naPPlDbqMEITDzt7gT4Vn/C/Xsl4gp/vgfGsYrDVUWIa8PRDA1o31g8tYhvL0\nu8jVc7/ZyStsKJWcczL4nIzdFva2Z0ySEMOdO/SlVT9zLaveywxj+vdAwd1w\nuEzTVQEUpmm9VQAQmQjIyjnKTjcQvKKeiA2RyRuSrfIYKxKJNtygtdDr//9K\nlRLJBBFoXrBHTzq3Axhc4x0W/sZTbigNn4ZED9ml4VpxoypJ557AfDHhDjUv\noWabSO7nzBEMy1al/vY2SzPD1ebEVIoE81L1PWTeRpYGtspJzyqjI0fxhnft\nSC0zLda4TzIO99+Qc5ro5kRC7iZ9wLoI2IvP1ZoPq2aC/rvezys7FMi/IoJu\ndsG85hZpNkKM6qeRTv8hvkED2G+jkEiNCVEg2KIRA3Yu124Rktkp+CdL76fX\ntM8hMrTXQY5yD8Q6UByxv9GZS8ANGCgaOFhGRpLDip1Cy5iQ09GAWI6O/C+d\nCMP44xgFWo5UmwtRxDmso3pmpn+4keuMb+E0nv1rpDxZ2Hp6TrLZ+oGIHTj8\nxQf5WL+O1SMCk0OBx1QdWFBnpplBAj4anzDVMfMtxKX5WO4EpOT5rPxwbsHl\nT8ue\r\n=pR5w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF2Qb4Y4cDL4gLpCnZSpistXF7RLOEsyaN5NePMe6lXGAiEAgYYxAeZ6dJepkoUdgAj1+ISQIzeNmq2Dr+ARfTnzvYs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.7a7992a8.0_1587683675623_0.36819880562581764"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.1150d64d.0","@material/top-app-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0b7cb5830938900ecd0b5201ad88746d308b91e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WuYSDU1eHMTzv6CxV7qwIQeTXkZN5ebuh2rB4z9fPpXsm1nC/HFKMHsAZSGkgyX6DGWM3sGOt0qxeKM4ZiaRlA==","shasum":"f508026eb79f7703564eecc756ddbc05fa8004a6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.1150d64d.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojBuCRA9TVsSAnZWagAADX0QAJZTZ/Xfa0FA4cGggktQ\n7UaO6xPyw9Hm80x+d1zQuBsQlJ8Hon8JScaCC7pewB9/vvP+pmb2iZHKqmfE\n4Khm7o+LwAg1vXptrb/sTRpQbXoPuBsJqDuUWycy/QI4aX8G4d0XyAuNfIPm\nbRpHGhQBwA5BHKVAJE9lKfRpRqYO78GwyjgYZ3vaMXOmbb4hinNL3Oifvh23\naRV+S9xizH3eYqVmwpyhp7cMlWZkSSN/DT+ATClF8kzPARUZvca95SKMHqYB\nNlVP/7Ae7XwSVFO0ALy/EpDXdZnlOgJYbMF9zCjVW9uMaSZhB40YGa0YmQyj\nlRHkpBg23YI8bPWKaQDcVJ7Nu+ukfTlHFjW3INYnsboRA5mWLiTwhrS+J6ZF\nsujHG/atG9EZK9GpSgHk73z7EtZTVLwB6lYdbXgCw5OSzHjgudLts9khTEDB\n8+zlLIlWaQkOr2gEirg/aNlm65w+jD2bZeGFRhG3WzB7nEAA5nnTuWdp5jIH\n44c8esqq32JsFHFqMxy3YxlDlKR2iEm8D5bzu8dZ88E3qTtyYl3S1sSDFkp0\nGZp0CshQjgW2rEft/qUEiPW1Wx8yAlYEzK/8T36jkBYqz885J7cB6YmVf5j+\nyvtQvoC8z+kmd/zidHFvd7UlzoKJv8U1SkwcQ0PP8feibVquCj5W8II3HNM9\npjeL\r\n=bDpJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDE8z2Q7Y83EqrvYnJMq2Ln3gnk7GTDe52mOFT+b208pAIgGXTnXG7nfPseAfEX7UbEsnQ8n9UVJMuwOECglRkruUo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.1150d64d.0_1587687533801_0.4210772087940624"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.dad3f828.0","@material/top-app-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9b04a7b15588d7423d100bbf29fa317a1947ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nW4zd6+rRBDO19RRfsGPvddyhAqjw5qfVp4y/BWSOdN0T2Ao77HT+bzwXaItJlBrvb2ZoBFYFL5TSHbiIP/ZNQ==","shasum":"554a0663134b5eac97d1903dd4c2ad2fbbe19419","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.dad3f828.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4eTCRA9TVsSAnZWagAAweEP+wS2FzRocji4pA4Sll3a\nAt293MFUbQIMovsX2haOgOd7G70YMggJF7EazsSJsfmoxK5ILwRwQh4V74Q9\njrEPnCGzBdvHLyAV6iGKek91e4KdsZA/4tpVeGeQjhm2dSgqF2gIcpQSNEUk\nATrnQ5jUFrEcrXP2uiDynY3YMkQ55tdP0TF6pOyGnxltesJmfbPgR8JSvKQQ\nx0IKJ9fAIcW40Wwjf9HZIkDePw5V2E63IJvyR+mEIXL0jdoy22JLbkMDInOJ\nLvlxYZrPkyl2WM5HASD2tzVSpNhgnkx2oFuEAjuzuxusSknnNMapTjnQzYEI\nOHdt2EBQFNNQWudnP7ftzoY9YOBk2FScoy04p2vsVOkLbmql8kYxAOcWCmCL\nQgQA6JPZadorsliZt/esvm6dRKhWuYVMMg71EPDDsGrD+mf+BVFN/nWwehNB\nrI14XFNrC8l30DsShdEaTyMtBELViGNphsFFyBS2i4x4tQgxr8rU6UCllY27\nsVYQQOlyf7EAflXISf8dnwioX2Irin6QuacRDYw0s3VBaUfdix66/0noEIET\nd6QEiiSs7mn392v0u6LyglkvrI8xL541+fGYLW/g2b7RHPSgbBNstBkch3Gh\n04QamSvNTRVvDsBR9FpD9/zV2Qb2B/IHBtLeKL3OmkXH3qv3KDbmmJYu8Tc5\nyk/6\r\n=w6Kg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMwNM92jH2XzaLbf1BzMAcoGiBL/DkGFXB1i1btS36aAIhAP1yUGwM21r+TaHJsYZAfmbFqpyhHJYSsZVz59fsKXWq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.dad3f828.0_1587775379281_0.9984707254493566"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.1bcdb47e.0","@material/top-app-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed51e46ae11b69727c91d55f440b68af397ac10a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YVgm0W+/XdwZeCGF5p4XQqCscVSW4KZAr7kUN67pKbXhZjvx8TxL4ATr1uWV8VNU043XxxGiM/e0NUlTfM07Vg==","shasum":"dda13e5970723c3940636f8aa236b0b401ff6405","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.1bcdb47e.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4MZCRA9TVsSAnZWagAAic4QAJcbnYtcaG+zwefZRV64\nQHC+PpHx+uckDwQWX6RlW6y1WfEfC4JAElWmvos9VhuW9dyx67uP4BYiT9z3\nHTIxsuCIxY4GhZYs1yV9t3nb8m0ncQDaT143YkhmEcKem/b3qMqK1Sw9eWqc\nQ+PsqWc+kDzBBi01luvDfrwheOgMofHWx44VdED9veCSOmPsG2/0x60jZblF\n25/ibaVAl/3SvsEtF4tHXyFWCu5IxNcOMkILIjEDDKKwD8AKZL4IFNff5ZAc\n8OoctTxbHM53+SEbU9nlfNVXcgiDqW8K4JkPNbNUyhop1c8lKWVWvnXKCNX+\nBpdfVM0JqGEjSDu4TqSLG9yFBdxthK2KuMIZ4tUzqHLuBTosBxRHwfh6+ia3\n2XH3q4YzKo7giO+RtFaLCJt0hE+WdSLEeaO58ylPh5uDaCbSSGZJmEkjZT3b\n8Qa7uFiJ1eAJbwaGMpwzz1CIZwBVa9Ve82O1iC3P30gL4BPmLuxiYM5VR7sp\n133rgotNrajdejePxF8OVA3veJTcO3F0v2q25Y1slEe3Adcxdf7M1DzflCBg\nSMgmG5K+OpLPi+lPj/yBUWiTjBJHFOUlCfXvjsulVGfaH6JW0avGVpnpljIB\nIXgRvn57S5UVEUY+qlDCSak4qTxl/Eny+aRpb/mEB4KUyDhs0xyLUjrWl3gL\niJxl\r\n=lGuc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAeGZO/Bb6Ca2+skkkd5zRlvc/TAChTv9WTtCsYIvxjKAiEAuLanzjqgyUalUf8N1zqg14s8E6pB8SacSIcrqIQUb0I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.1bcdb47e.0_1588036376765_0.6276965293341827"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.86ff1b9f.0","@material/top-app-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"61a98a59545d9e0b0fd96c928737677f2b981fb8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HMox87DOuNw3hjOzlikyn9EmoLEBoFZ/RjKOeqjM26igwMOL2Y9L8PoF0Q1qWsY8RAAHyiCM8IlCq3IZywRfqA==","shasum":"31046780e8c3f8370e59ae26e76b4c762872fdea","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.86ff1b9f.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5tBCRA9TVsSAnZWagAAKccQAIsr+0jBHZKi/DeHVpbg\nPsvrwLjG20rrEDbLknkRaTfyalB+hnpF54Ybx1Q+Z5Zavr9vj3c0q7XU3Hn2\nFmNxX4mGqCF/Z3g5svhgWCDBU+1zQTpB9/4kAbKTtMygP4lNjB6qaYV16osH\nzu53fM+8AUytBBGm6xfMCJ8FtVl3C3uFG1u4ikvYPNCJDwXr6p2bugay/fee\nVoe958S0YHyDS1NpqueFggnvz2v5+J6Q67vj1dIwPm8+lx/49+DOaqB7qhgc\n3G/QMFXA3xL/TtEMdLHBT2plwibsvEDv31yqAMDudCIiQbYfJE5YLriNp/0j\nQZeYDTyOtIyHsh4A62ZoR2cvzahGTd5ccXiJHWrI+VZ8XHA8wcWhTE2dbikA\ntynoFVUbXXBcSBymoExkpEvxjkClLbhKXtFUECn8S51iEJz2UkuUlla+Mlcn\ntg0BzQYvHrqJsfDkjsZjupUGV77MjYm4y0qSIRm3mHhbaG7n7y99nNbahlzX\nr85WZl7mtmwwRYaJwD2pHu5eA0CoovmUK4+BQVnc8wm9lW8ywdbla+PyASQo\nCYUUHbyXCX1+mZCkNfmVKAowlWq6ZwhE6Ej072t1CUXMXyTQbaY5sUkY7ENz\n+F/XAmt2p4Y7xTk/5G2Na2vc8n4l2bGoGu+MmjkwDs7lr2ipwHQ0sz7+ZJf6\nO9oM\r\n=7moJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEymQQCweKa0czmPnI3M4vufhXIrDZ3qbFU2bUUohqIlAiAxmOblQaiU8ldSFMF6YiTjvFHDuCKRu9OISky6Fe42nQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.86ff1b9f.0_1588042560615_0.18230235746863444"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.54a86b20.0","@material/top-app-bar":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8cfd732e72200c6982fa6d6fbdd6cb5496660a6d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-B5SKiaoT9wA17+/nJaxOA7MuoqaoqefbNxgn97xS5Zt+MJDiqkbozmdfjzq7qAenUjIkPC0M4a7svtUGd3+BDw==","shasum":"d1cffd69124e71ce50dbdfc0ad54a1e43e245d9e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.54a86b20.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6B6CRA9TVsSAnZWagAAVV8QAKGqW/bzlvgWTpwBLAIy\nxFJseeKCkNeRWfrQEUuV9wIFJKa4Lr7S4gwiQWxbXO7mLMZkTJ42bbY8RlgY\nExZIk+xoEe7fFWXPPH+V2MNFdoAmSMAhXuPR7Ef5MfcvyH/JgcNPe1fBVD7I\n5GvPIlHPYkBU/VowOL1/4SetVAszr5ytGSIDWhjQc7eEzuxL2LPGfxIms8G+\nOjsXM7hNRvKzlsABNP2jAuvmcDBY+gQJScAqjBzU0i1F1m0EaruO5COI2wh6\nrZHjPTNCDWLsFNMlU+37EUtvN3BhGg/WS9P11JQk/AjY7H6uCHPO1ntR+Lie\nbVc9quCONeFE9VarsUok/Jm+luThE5y9wGYDFca83lPHiYeWgwoyVsAc+ILe\naup3IFrdv7U/duNTYuNWdvFstt6xWNTRbMJB/gz7rFSFQpD60e34/B3TsQWm\nEqoJ3pQ6MTrY8BgySOAQm80MKgewG/c71GQsLh9Y3TQNWbivuIyGMss9kUVw\nPNCTE66bk7DlZ9xbEdOJhrPi/EcgvroK8lTfQ3vRUXYUD/NPL7WIZ3byY4J7\nO3Tfjqk4//hOtmTgtA1BsefaDpTV4YEbVfBgpEvCz8G6iWTd/69132dMx70m\nDaW4WN1lRXpzYvW4ich0B3Zr43HApwlrsJBojKxDXl+Kn/xeqqAWLk8khsFE\nJqAn\r\n=6FD2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFJAfirmp9UIKYTgLWdRRpwrzzmY3ZKYSl4GXl/IBYuJAiARDhEPn+BW3Ebpep55IKSeuTsKXFYvGNi7V+cOCl+oUg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.54a86b20.0_1588043897599_0.10569034988282633"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.938fd24b.0","@material/top-app-bar":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-NS4R3gMmogGik4APLH0bG/bUiUq3CK+tqcueeM4TvTdLi60CjOYHzewvdYZftVwDOpKzcBmoGUmRkJSxoIz6YQ==","shasum":"d9a6169a89749a606baff1910aad4808009e6385","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.938fd24b.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqil9CRA9TVsSAnZWagAASxkP/i+dPGBYjHF+RKKklcxk\nvh22WpKr/55y911fq/SY3LMEdHNwon3+jvic3M4k4G4Ida4++EaN+dyCfCMB\nOCy78CG/UrSi3fZpGV5mz43vq3ElShxysx/lqdgfoq+9xWmx+NDSKEewC4o6\n03+UPBWS54demCSzA7//FuKAtlQLplCq/QZIoLo23fmVlxFTEtGFm+Fzr3TO\nAUgB9LHaxIzA7RtISMBXt8E/6g26dAmy4VX4wwziDM1NrKDWjYCvGnHeqNxg\nzBl9S1AjpXtF8P4uSCj7MlRyfC+T2Aoy7uzru+RC/j7hsUGOIm/nHNN9Girz\nB8Kz37NFIhY0/ttl0LYC3C2FSFH9zMk1hm/l5ZBZnFlSWjqjJkOX7csUpx0Y\nUxkbJeXDtAVUvut9glAWMZlRTbCem+7aMa+f039PVKpxrYYhEaAAP32nUmoI\n2mB68QUMrPDbV2cPwXQlo5SiHlw1tRfyMPmwNFtAEFg86QKmzVg9K95ezcrk\nHnugPufwSJ5rWdG9aCbM/ZJbUgwBlLYhhhTBf/bmN1FcheyyfXnvNhj5uyJs\nCu518Px83w5S9AvYRQCRjmIe2m7X+pGi6lnIna6k6HNlAnwdxFD6fERh8fkA\nf3ga8thOvRuYJ/Q4MEica76blI9sbO99WhEHAqcdBuR+hfdmmf8IKVgUkgxt\nMEt4\r\n=vVla\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE3S9bLntCSU0mJ7CKQqCDS1byVR8nQrr3CXuzzupIgVAiAXVRmc2RtoeAQ44Z3rmGRD8Xe3A2hbqYheZN4zQ0nbpQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.938fd24b.0_1588210045464_0.4024084208182588"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.39e9a008.0","@material/top-app-bar":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2777862aa4cbec00918605f0726651658a2c66a8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2+bsqwK97JapZAeN0Ac8qQwT8/epT9UW1NYvDnZNOfeHgFzGdSz7vgoO1JuWQsxBiqaeQk4OTFRM15jZsKq59Q==","shasum":"72a99cc5be18784a6f53d1d8ebd4f97a6371e7b4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.39e9a008.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjRaCRA9TVsSAnZWagAA+yEP/R+Uqykjtt2V9mmdVKpl\nPcaiSiGuuO744edn2A8JktWDkT5Cly84NvXkX97lpQjw2BBzrCeGL6QQ9fyO\nHikLdpTEzQv6SH2jTwua+kbij/nz2UoAZNGtZS/GWVvcFEkgMopX/lRZD19x\nHklhtPckzhGGWtcPTnwAncRLId5Ue9UhKcJKq0hGE6iBvJNQ6FIxfSzAv4F/\nU5JTJb360ufqg38lEiT8xV34ce5V+aWjcSMIABCx86VyckjdLfv9QPvQtVu3\nQn5ljTTPUZEKTR6lEflEBUy4mYfoEJLi2JQntqFPHvzxu89QyM68hei7ih87\n/C795+nZ2Oy4DpqQottx8JX2Ow+5qco2a5XHdqBXF52AG8uCKN+yVREirmEK\nQMprXipnd4g+LCXqWVPpVFPEO0JWrxYgrY0URuaRsDuT6P8WcuGcN6xpkKqn\n2dS8zRwxzREjEiMWuNDluvOS4iStjEN3UuHhUl87bSMo7sCHAFqyBtHZ7IXH\nVRt0N2rP/VkU+sAftFIDY3HjxxYoGztDEy6oqAqiy8qmNtm7aOMGHZprCCGI\nf2tMoSq+9grb1t9phieX6jjlWa1946WfdUQShF3OGRavrDOPe5pFdHryQ0Rp\nshjn5VjHR5n8IJu6/2SpPXlTHi4G7OUInhhgm848rUDF4XtBESu2XKY2Zaa9\nn6ON\r\n=MjFh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4iaytHIv7KWRwy4KqnER3lciM7rBgK+nZ10V9paskDwIgD66KBlRB4WdUV/NSqeAR9exg2S13+IBwmzYWUS+m2r8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.39e9a008.0_1588212825181_0.6618448651670836"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.f3b365de.0","@material/top-app-bar":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b6d6f6d4a289f46197727279f5e776b79264ae07","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-AhOuh6175CzfMq0OWOlyx2QS8rgi6MhvwRgUMFJhWBlJAx6M2dSz/mOtwiuOYmZkyNvuTjtxiPhmjeJ9PmVzLg==","shasum":"45cb638cd454aae0729484131717f022402bd664","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.f3b365de.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqov3CRA9TVsSAnZWagAAJRQP/1jXSVFifBn6uocUkeln\nPao2tS1evDaH02d7BGefJ8nz+gINwuYIYTLfoV4/3yOP4yfmF3fkkOH4s3Rc\nWE4soobfGs3Ltpp8ELdwORoeQESkfqpdn3BVCuJ99xfiV3m02T7BLALwzamC\nuO5N0xofndWtczLqAHqGqaOmiYDqceL2O1AdM8H1ShiJ2O168D5NePHdSNTT\nLaAzLk2fWEpC/J7xxFvqwZgrDcdgIhNE0CKTKB0ikyXyTr3bKxXHPOZYMVpQ\n6E96JXaIXKaAjTSR33/k4WddNeEGnx6wvovrvaQsHXiEm1lmtrgzrZkJHXif\nEHiPNvN1du6YG40ckS6wTloNSCCo+13S0rXUrdaqxoOyGo9xOQXtIN4dzj83\nx9oJ+RNxoTNdHzgPuWaRK75g7ZjcUgU66HZzJAZrNl5kkgQvhKHcRUcqMorO\nMlQS/QebNM+TeJcSXZbvpqzj48le+jaP3qarkbdV8WcG78enn5uGOw5l2+PX\nD6hE42FI62QrFkY3+wPe0XHrRhfzqVr2zalbxTLId14CwikdzLCP7XwRD1ya\nT2hl1V6iYE4vnNziykn9329YWa2T9ggngXZ0h1r8vAFqN+aarFJE5gIA5AyO\nMeU36qeqKphF3QXgK5PlLWLTbeEHHlCKFwizoiXIJUhaZf6E0yt9tEwX61n6\ndI+M\r\n=XcgC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC3c9sy/p9NMnWQQk+OcJAAAe9dk5d7uY+uZEdp6VczmAiBUFawwn9Q81ZC0nmvSrywU2TeUW/jTkdw8BHie3ipzbw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.f3b365de.0_1588235255298_0.5374682343222332"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.cdbdf807.0","@material/top-app-bar":"=7.0.0-canary.b0f83d2fd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c46702178e5c5a1096937d4bd70ad6f4ac4d1dab","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-butU9ww8rvTZKznRYw/LAaU1sOrYNtDGTBNR7l6A29QAlmSP1F/c/+pOmmvgl7jvT9laJfUIOQAlYd4FZCtGKA==","shasum":"a43d78b78e45c5ca7770b188aa94dea5f9ea4b80","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.cdbdf807.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2oFCRA9TVsSAnZWagAAl5gP/iRySM7TCJgJ+gWPKxdd\n/5FrFpfWZXo56ot1tQKcky5mwonSfKDMVcixxlcAzHM7p9qFONh9dAJakoT8\ndV3/Y5mJPvVh8U6Ur2DMxjT+w8E6UuyhC2PW87/e+CmsqJ+c/OcYDKD5alY8\nP07kahLyKw7XkkqcigViNFM9+1q5aJLix2nCPvv+JizJAfndfZtp3S1kEBt7\nYPKbxTY3xH6i8PUGFZ5mBz0MCspvwCrHm9xJ1qKU0zsdwAOV43swJYDo6jCq\nKG573qrXt3sb01h4AS/FZIMKMH5HW1SCiQt1jXSEuKdjWXula7D70K+cQbKC\nEzKe2z2zA4jiB3rTrlyzOPXFRK6ldmuJNzYzU5jZDpSUczDHmbDx/RHAm9WH\n44/Fcgsi8S75ULVDYtyAlyH0zq2pOpDGFQ8pc+Enw7rO32pIT/f8JkH+U83j\n4ELaZCXybIGheq0vlBOYpxXF5+9rlPjf/RJ3aAzTq61BxdEHl2IHGs29h8Pp\nom1jUShxxXXxJhzG/cMbP2Ez3gUhvvOTE6Gcqy0PQDgwrUl0LSPwraYCSVAf\nzvwC88WV+ir468pwx1sGTSv9reJncQ/26F3hG/CUp5B0kKBlCo9BLPDQV+NZ\nuJDyy/7fMUnTZb0AN3dg+6GBabJzsO7nxgrHDRfarudZDGU+ifTX7DPGsnQe\nIDLi\r\n=ZI70\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRJ1uvI2qgGf3WqG9wWDDkCUgyQZce4Gv4ilHHONerqAIgdl417Lg0bKvQbq3eP/GmiI+5MZ6yl8+yVMJQtG5tA4Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.cdbdf807.0_1588292101319_0.6013067838791022"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.9995ae17.0","@material/top-app-bar":"=7.0.0-canary.e59906a57.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d5bd8b757cc94e00dda1cdb19761b283a15eeea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-x7lvCDGdX0AxRaqo4NFEcEvwiL0CCqAI8qUZx54Q0x8bL7fXidAqsv+WKvORf9baRuhgAyMypglo7av7V7PEYQ==","shasum":"25777501762048a9bfcde873f05f9dfd2dff6f76","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.9995ae17.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG5BCRA9TVsSAnZWagAAuwMQAJ74uBDoqp3gRJwuEw4A\nDpaVhfru2vJXu/TiOowlOKCBYJKxNpcI8suUWZxYH7MX3WK4aRIU6yqWPu7V\njrqxkens3QSklz46fjB1Jv5RKkZGdUQ9uUiX0b7VeKAq0vUo/s5pgowxeXlh\njpEqu/KwP9c40+eT9u4j8hHSW1KSsNdbzwJkAmk/A1vX98KCLibSjiispCcz\nR8KPlBF1Qic01wEErmbX5cp2WzdeWQWyPRz+veGkBYQZYI7jGS5u5nM9q8+e\ndl4cVJJd3A3JCPEREzbyUZ3OESVcMAJNPuRJbIZNpWOqvMfpkqA9pDKLJXmM\nAp9axTCw4bnPIyWN/1/BYG3NTmrShWnric0eocy8AH8CnnvXyM94Fhf4CmJv\npJsH25ITuGvsv24t23JtESoW6DktbnIbMkePCpVclawvZBcmGP6JRdeSo2g0\nY/0D/o/BSC0gLeD5w65Uw8b+CRfwNiO88B/WskVv31Sqnb03DjWblh6FUmSI\nERjNJhy4eAQTDAdCMSbp+/mofQKs41Za06iXdww7m9D4oYC+8vz+zrnocRNk\nFFPlqfJmZYivz/lHhR4I24hqqXKtF1sB86lEHzVlrCPxJH41Gg2cOSb40Tcf\nNWocre7tbT/FLoSllvser1tayYkZVNykdXMM0XspH1VJ6OVNFgCJJGTtrZbl\nHiTk\r\n=VL6S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuiT7Jm/rp+NfjFzAeXiBXtkIXQnQhfgYFGGwq4n5cVwIgc6M+qGd27B6IyXJZoz9Sb8ISyNUIxoHa4RrR9kDDpCA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.9995ae17.0_1588358721221_0.07394276036104941"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.457bf035.0","@material/top-app-bar":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4174fcf7d0ec013419d2f97c6a615216cacd4687","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RGu/aWrPhlTLNTzlad6onGZYpyLGDzUcG7jSDMZTcN+1gj8W+xe4j9tBhh7+rxfD6l0gNGKW3nwJFJGpFBbWhg==","shasum":"324be8df02e649d4aed23e9cb00503eeee7766b7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.457bf035.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIu7CRA9TVsSAnZWagAA/f8QAJR5fxMlHbWhe1+i8uuR\nMLMKziYiz1WLjp4hiLdQuUKgBKyAO+5B4tGEGfqayucW9gIrVW30gFiNt8Z7\n4pus8N2hPW5TyKoJ0a6eRoGXHjjk/C1vlfhtEP0AufR9uKfSBqMkUHuxhzzb\nf9e3qdWaLPpjSmeLiYY0CN3PFEOAPo0V4dSiRjp3fFBpxmF4/+G+ONJeAKCP\nVn69F4UgxhF35CHImJkZ6+MBR/aFlh2PYf4xauDU3wVWZAuEW6XEs08dzDhx\nfXVTvpRo6aKSWfLvT1PrzRhOclX88zqDokqPj9ky5Y/xf31U5veiYbHMxc4y\nCpZfO49o9J90aPlxRN1VZUS8WsPNKfGe3z36Gd51i035Tqe0WaNmr0TBeNK9\nkP0lhCda4UzvNyIjOLoRCFTPe5BcAYR8ivmFV1PdW7m2yVg32fkoq52mXdQp\nWHtQVm4oQSWBE53eztgdiIGv8DrgmBhrf1A5x5/1Gmed82vMiht6l15ghAD3\n9ux8iNksHOQJkPY81rSatv2tyRYyr8teis/GbPb8pfKLkcQuvwMwMKeVAY7Y\nTg0p/8PI5qKx1A/D4LkAvLbETa6yQgy2YpL+p9t5o1DWVZdKf9uZyP0IYJDH\n2FHH3PojUJ/lxP1esc/elrZDaif7eP0WXzjQjPSyOmI+W6v9gyuIpTISWccp\n2zCM\r\n=b5sf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHvZR77HxlMHIdSJy8Krc/4gmrXGa1PNTbHFh+FzTs8GAiASeA1bqaj/gjBFKXghNz26kQgcXl28ls5LQUHLE+IDOw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.457bf035.0_1588366267349_0.567831232434147"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.2381fd02.0","@material/top-app-bar":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4e8207837776c4f108fb86133541c49689664446","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-trjTgtQZ5ewKTGCNsdWkxv0wlfi63qVXivJXwSaqeIz6+T3jEC49w9xKQZYkykbOP+Jec5BEZBVk84IQSwo33g==","shasum":"90eaab2a4622c81c7f9845e75c5ab086c4eafd60","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.2381fd02.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJPcCRA9TVsSAnZWagAAapUP/3JncbZr+U5c9VQp/ti5\n6nrjiTvknYJESJQbF/CpwrTinkdRT2TMTSOoZTKOYH3ptczSKZSek13WLGOV\nX0Ki86kLiWsmpDy8L9oVOntHV0lP/24hlEFblZXYuKjhmG2KQWyPuWxNpnzM\nSu8q+4eZecjt4jidIMXcqfa3O1/h2sJaINBk4DXOTf4TZeGoFqzTjJFCq7s9\nvWPyhYeIaWGAIjsIU3dkB7PAHa6P7dahImqwV8WWQV33WeXYBh/ACni/2MQ0\n17rzvQ8MEDIekz6b7KBQQ2dVz6WdibNJY1baNPROdDhit1NCxolnh5MFWcgI\ncVdkIwh62IB3Z6ddcxIoSzdpvJE3sPryODV9IcnpBn1xM+cqJ9ijjnKjMhp3\n3RLEyXMXFmPkd/6P3z82lOlM4npI8CAIjSEMRtZkvkTwuJb3x6uk6Tq24DWR\nfjlzbTyaAI2MS6YkxkKLKXFkKDGi9u7SvfuG+/DQhSXMh/D9yMVa1yDitzeo\nIjVWlBBLs8KockXT6JFXqMy241abbKuHYnxIH/6x5R+uI6HP6Y23/AvK25UW\nCepvHos0ifRlkldutDf72P6BvQPOcU50CvmTImmxzwEzNDaRfnqgkepEZDZX\nPxFW6b9w3P/kll5LLwZI3/pxllz9hJNitbiEyIeRnhIZFu/ssH8yBVgSbwyw\niSuD\r\n=zcNc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoGvzYgvyl20ULVR2XwZ6z0kJlNoGYbgULfp3evcfAFAIgfn1YfmOIg1Y5r326KhKI6jpWD1YuglGZ0InFdHjIlHE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.2381fd02.0_1588368348023_0.4004508880289255"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.b2ca9b57.0","@material/top-app-bar":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98f8c3a13f6577a5e1ccca480ffe483c91183a7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5cb+2zhUGiOI+KyqnWt5MA9QIoxIymEyBlxIn5v+vwhgwI82Y8s1h29BJi+238XfzwwWfLJxmPkweq3mVG9f6Q==","shasum":"8548a42b2f858d62231796108a4b29a202057df4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.b2ca9b57.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJZaCRA9TVsSAnZWagAAIwwP/2apXIV9xNXYLtiwDIoV\nQUXRxjlftuesfZnS22LlTV9lrdIXFrJp/mBnKG2hmaQREDyefzsbFat6Sj3J\n9J9Gd1Liou3a2enN4E9020iNq48CZpre67v10r3rg5R3rKWg1T9i9eWf6HEV\n4Lp8pu0d0RgvqMh2aTpoodoS42++m9pc5dOF/AewTZg7KCxcp23+XdjInLvV\n37jP9MVv6DFce7squXpR8Wz5Ozax3txQI4T0GheBngaYivWKXlfFKdTtnXtn\nLg3yWW/b7u+f1r2spz9PvxaL+WePOZT3+tU6eXPqAiAcJNEV6if5ives8d1q\nNElCyf5ciC+u+FAZQPs41UcOcYh+FQ523wnNqSV2MHo4degY2i34ytK7Se3o\nyL3vOmIiaVGenre6YxmJpiPMal3+78LKKoalZMRKe4oWaZ0Z11DqmdVsPjKa\n7vvXJhKvI/qIbcYgXtQ4N3mnQfXy3cwLejfZ163tOz/NDT4FevGoD3zaaZZo\nI13/SbcdUG63IId0qz5ji+ZewZ6XwwQg7NZQP1BSl8NvHgqtdsWQK4gpRgDm\neR09JFyYIftAi/I0OFsN7HPVlDAFmZawCEVX4ktdtHXjVTQvnn3O+OxM/6l/\nC7+AD5I4Kq3R+oil8wBuVFFIt+0egoJLfdD6gu8jvo4z5am4+pjt4xA84ie+\nH7lZ\r\n=XFFw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGzXcyVd2a2IRS/RU3QMG0orjTTiCYlkpGdp0UaXx+LjAiA5zww1rcvWW4yLviecBAxlOc16exOtacvW490mLPc8Ew=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.b2ca9b57.0_1588368986070_0.019153295085072797"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.b2b088e7.0","@material/top-app-bar":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c524f04088895074106127ef3584a2aeac09b189","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Q7qVAlgWCEniGu0oHF8KtoMcz6zD4wL38Peknwki6IcvJREcEzfr2i3EsPle0cLaXC1XBh5mU+wt0kiUuxgyoA==","shasum":"9b4b465c2f64784bc85e20d49e9beb0602c74621","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.b2b088e7.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKPUCRA9TVsSAnZWagAAydUP/3wxeUcJl4C/baIxMERw\nW0LlvBnu0F57z1hcG0r9KTneEHyQZkDkoDd9vV+Z86G5RBi9GAKfnxaBUwbh\nSH2BNW9gxerkBonmPX2DOKhz/gvstsdsPTU1HrE+gS/YmRJNo6SSlNaDYKZq\nqGnRC4BsyMAAHA42+ln8k6p2BRgtPX5lQvgK1UTIO2yK2lyjju2Dnf/5Sqai\n3dKjWj8MYHy0VS1KftWFAlyEbLTngx00HpOEYrxtAV3mgRlO8iCveac6ZiGx\ns/uSbZwN7GlI8AU3Ge6VTJ7KFYmIYFsnEg7KHY0tb9o3pP/IuMSp+4TsXauy\nVg0J6BpsDLclTLRD+k7G0a+fe2rSovQG8zvnzA1ol2M9Ep/7kyJMhd4jqeUc\nmKf4ezBFp0LyNowmLWbfQ11BTFbVlqqFRtVdmyBoXkD2h+DdEnhT35raAdph\ndOhRQMPgGCuU3a/ZC4QiaQrrNrr/Kt6aqoTQerxJM/CCgX/FkjMMVmwSsVs+\nvcW+JzUYcL5lZ4gOI0D7AV/wReZvAbk7JcucZ18MR9R+ML0sQCUXcnhkNHis\nsNMTUKKLZMTaj3GABC6x0aZdd1NVCW0SO2fPSdVVu7N/iTnF5tYWH3Nh9swS\n23imOq7z6chYDrLJRE9TRGisbXSPoCHcIH6PdaWIW9crAQAh3NyfQg28NXa4\nAn00\r\n=b9tB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+XsuaRIHw/a4pfatwdil6WHWDOSiiz2GwvU4T+XzwTwIgDkGBPlGOV0+D2nPov822WCYzNZWwqAcQhLxyUAvb/FM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.b2b088e7.0_1588372435938_0.47439940140784076"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.fdd8f69e.0","@material/top-app-bar":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3888dcd836699affb59b98e4306c2ac03971ac4c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-86wJDunl8ZjOqMcRuxKANu0LNc+OuaYPvwFHKZV4toczdvQSGI1UfjkNmgmagRKwuv1YuXI3TP7nEjTN5x3pPQ==","shasum":"729d1cb2614f09c2898ad46b4a8b4a9fc75e0e97","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.fdd8f69e.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLvuCRA9TVsSAnZWagAAfYkQAIeuCSV3JWPQ095TSOD0\n8wYi5GQTOFRp5rV0g+R24RdoEDOiDj8ffku+5YPgu6gIY2AsMVdXEDSY3vlC\nJRNNA2qLivu/1QzF05lxNOU0fRi15XFSsYw4nYQyTBRdFcH+4reh2StixN5x\nD7bWUitw8xTvF/NjLNKgfnlNV45jwPmLZGpahp+JEU8r41TcnBnck+w6IPXB\nFtfHsPOjDVVmfYzcLfZq2D8SNZ/ZvNs9IGCOEUSgulhKh0kXmOe8c+25IKgZ\naB8sqZQbPjLyNw3QNeirbomdN3PIPC41gL5UABVioGAg3dgW2AYnBgf9YNds\nUN0y7YpDyZB97PR1iumV1F5dT1qudN+RaxCY3F47TibZeOHHe+XDr18C4d97\n38EHR8W1S9gVLtNOXdv/iaMRkkhVqny9oHNgSjOX7n9VScAa25J/a0Pv3oBq\ngmJZFO4RDluHT1I6KIsXo4OIwK6gzIfGWRxhYOhq6cWugf1OYfCaU8XJF5ij\nZky/bfflRBgofEEJCxNc27Fcy8ivJW59oio7+6eJF9OGG048V873hb3EhvVG\nth31eaZUsqhoM+L9aNSpdtJQZBFErw0CKgX78qrvBelzXnBYbl3jDvFdul6U\n//uCrqGkIPaMj6pmwsBVsY96QuN6WbW/pnUU3VYJoQDeFd0sv2em1TO/dwTH\nHBKq\r\n=jUYF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDw4LhGY076yGdT6mIK9rMX+Zqg/kZ7EGFspcmIuetmTAIgf+lJ7WvhIgxEibqLQmkJD8bxn4y/sIJwoE5SvQ2zeeg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.fdd8f69e.0_1588378605814_0.3752712716618818"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.730f45a8.0","@material/top-app-bar":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4604a16ebeca9fd76a4f742d3f936e83aaad680","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-3e6IyYCnNWdVKbHlEY6FJssgBAz0lN3vbXHMXMmpJ3AP/fS0LJn8wNomm0qGiQxpwliw0r/JNyL8Zy9CktEPYw==","shasum":"e1645e854444d54da813b172b9349a77676203af","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.730f45a8.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery1WCRA9TVsSAnZWagAAQOYP/iTzujMKwUt6G3HmjDHc\nrtDXxlmQvnR1fNzgQ9vmIF7C/H/W9jSTtuiaCsdRFW+MBVHp2BD+ySewE9Hj\nga3MAu4ekFbqKpj9m9O6iLcKqqnlJWlwLiETMjNN8DiJQAU0D+EOzIZ2UPaY\n+qmTzMah2IRHWnSap5oc02YH2927yVLPMQRiU9+/1CjmUdkv09+5UfIrDcDt\nS/uoIoVc07a2M7sMPLA4QXgQ69I/lUuAGrSaDXRLpC0pVXf4/e3QIscHXkz6\n9r3DgAzzSEhdmVYmWUFXRPCX3W/PEQpyS/STKU2Uj1KuQIsuVStJgz2oBURW\neGlL/b1N1IW4UQiBdjliGJCBXd8D+OxoQW7+AuzuHDacaUXJwfn0GovHQEr/\nysSnXLeuFxBlMiVLYYJ5awSgpbTKUYCLs5ctuti6/IQUeZiqS00BsFoUVhpD\nvlUC9WTjKXl345wfHsl7jEPkDpYejulhwslUxUDz5bGTjdWS+ojlGoZIi61N\nwxS5ARGf3xLPiymuCXxZ79sHBr9UJB4O9kkZMUOMehboOLvA3OPSuQ8kD0gF\nnhIP++cIERHLasaSqYe4HwNGYjNVgA/oj5Fnu1bBekExwK+XZ6nAXVPJsZCq\nk+Z/R198Zue1ETDpqeNTFhhzvInYd8+JRgoZoBMTq4iRnIJ9ItB2cXw8paoQ\nS6bl\r\n=2R3r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+d9HFSgABWbPNLc7aSUufjk/4etei+HBuSyQlMJxKeAiBx067P8eMp6WozzRKW3KCNphnS4lehFLJwXI7z0GRZzA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.730f45a8.0_1588538709700_0.5568133221764884"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.4219bd20.0","@material/top-app-bar":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ei+YY8Ce9/M5w5cQwEmsPt4hL8hAG5edzF6I/LswKWJYGm4R4VXHclmTSbzEBTNOzS56Abz1b6dGg3yhCpWpmw==","shasum":"5efd61eca5cfb52500701817067344eb32ba5dc2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.4219bd20.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKYJCRA9TVsSAnZWagAArwcP/3NXSQXSwI/rDMg72+Z1\nofqQDhQFs7Xj37AAbyweKvUpxdNRmj6QVbpOb9vHiNAs+UResxksAkJ+07uI\nyO4f6z3SQfWy0EPMZTtFDk3hKa9gfIThJK3GwDvlH3jIoS+XJQzDcp74Ekd+\n493P4lm57ncOwhcZrnDinUQXOXNhRT6M41osLxsTbSks23hClbOriTAbBSLM\n4K9BvrCZY2+TZnhmdNYsbATWRWxfgL14s8dXH3JmqH45ITFab4Ew8vyZLT+w\nRSExSeMpjM2J/fhdgYQoH73n1ZDVUjWequt2a/oAm+J6JkZPQUOOW1INQAFN\nNJlBVUBC6yGOZlri2b2rsYUwHQpCX0kRrG+/CUhR12IdFZzMFYTzCd3SK3ls\nEaJq5g7Bi5nA53TanXIMa8Ju3KRH1rSvalzz1Sg9NorjrD/2gxtS7eM0/PNs\nFrU/TKTmR3VO2vg2zaTT2zqJjecLUrSaEtyewfPhoBQ9FN+c6FSpAMKzWEWJ\nib0cVcUQVbshi4m9g/xTIxXH3fUNTOdgLeMcuQ14kzJG55zMb9yc3/4Ku3wB\n9Q94f3XoN/Ybz+5H/f28PkXZEYzXMT2CtQDM67zupjpUEA9ikBcids1snLkL\nLNexp7YhSntY7I7tIllt5Bq24zzpxy9XajEfyaUI13rezbM4qxc9PiaFtzsK\n8vgR\r\n=Y8SG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCpP4pgE6/1GKOPLQEMtLdKjY6NjzG3bPDJ1J6Zr6jw6QIhAIkmW5me5rc6V9m4E+Y0KRhMiru+ewNeoT4ZmJDmSjAn"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.4219bd20.0_1588635144907_0.9659030454390574"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.1d83cf6d.0","@material/top-app-bar":"=7.0.0-canary.03dec929e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"72586b3b03638e183dfd5440f006b405468a37d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-I0ffR5qJQRjwiRtRAfXHbs3XgB/GqZcNNZW2B2oZz9M8UTNVYXaobsScqkyACgYX+zInT+MUo541VPB5chrsMw==","shasum":"e6d907cabe34117b3541207a4ce1d793bbc007aa","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.1d83cf6d.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ54CRA9TVsSAnZWagAAEnwP/jQ092sgbvGedPcea61g\nsyHmHJbQZjXySUa0WelpWJusxKzLnzP32FfKa73YiiKgaBMXwO8Gn5lVBBnp\nAyawwnVSJzJPc7RuRhGpl9XaqjWGd3J9gAWiuXiaAyKX1EsGqb/gyk/VeTyd\nIAp3zTJ5RhWVg9eHxPpn4Rt2yKhn5cUJhcc0AXPhCOc1rujDzYIzCJmIqJhz\nY8NtC+OUOyOYfGNkcHmn/Yn38BrituQOH0cPY1IbFxaJc0+au1+sL4WU+kAf\nedz41MmOuC0KCbPHYv6kULEsNvgDIx87bEv59EsS2NeeQDyDaMKGi7MxxdFu\notyi9PA6/9IKw4GbxFrhWs/XomsMuKvF+SLna+AVX4Ymf/jUpKRUBv1R2Yyf\nwReFxBRKSDn3B9Ek4jJgMo5FhHy6oACqfGRWG1uaXCQeSzEa1XzZFJxfERce\nvCoMuwvthM2BqADzP14ZvOxm/420WzEYvjAem12er12s1u01uVZobnow9rTN\n0JBeGpq3+jJwx2trBBCy097xsUPBjw1ffZU6cTsYZ/etAZzesP2ofQ1ygysC\nQ23n6mQWAyjFeW3XI+Eo/JzVVmQdQbkDYObHg6P6slOAS+GYP/BgiWDvx7vs\nYr7j/ym1NQHZ3loOhpsEX+jGZ1IxLwAFAxb/9LF7c4CxiyiTJYc0CBcL5Vy5\npL8F\r\n=xigX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAufg9lasLRZbjBcJos9Fv8SY4j+eq57HVPSsjLhbyv9AiAOsC1iOpqN3kVY9OJCwsaFbJAyCHArKwKeZ8xMebzRiA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.1d83cf6d.0_1588698744542_0.3375933580641499"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.15.0-canary.3bfc63aa.0","@material/top-app-bar":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00c84910ddd746dddbb2d651a4fe51c784dc78b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WALVxz0uJ4cGgfvaMSF5Fzoh4bqQDZKPhArP0aZJu3n3qOBjbIGCs32omWe9hqEJI4pxpiwOKuVeq57E4FKqJw==","shasum":"fd406b1c2ed0cf15398b0cb7fd14f864b76b446c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0-canary.3bfc63aa.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesazqCRA9TVsSAnZWagAAsbIP/2GvCYbNxnsFon/zWY3h\nBJGGLGxaWSyzq4ddjLFkA86l/cKsV7efV8vOmyRXnwFMjsQXlhMHhRFcwkbp\nHmenN3yvURSUC3yRjds4wdch3Lri4fo8bryqztIAwj+ilhETgbglxifmABpp\nY1O+DQr1vcP7i68RMPydQj+1f8A6lht3JRCiQYf6mzFohibWVxb5mR864Jbu\nBWTNRgxMV53ElaxDf6BpBEl0WLoG5dM9xxpwhjNrim3gspK1Bjg78M0zQgoq\nEDN1FfB721qyJTCVssfqeDT7LM18GyCGjnpRBiNtppW58aV3C25hdHO2AwfV\nod6v4WoQymqFQvwRHjtEem/l5+uOrB2DqEmIeL+SYXkqasWruJMP0qWso+lw\nBGZ5UCNK9YtvlKZlccO1cKZ5cB58cdbyC3Yewhl0V2IAgmFs/dPn1KWdgwaP\n4cqXWcbPRY4UFg7lVEGPWYd321enwPe01EeZmM4loxMIrKiMan9Z233uNsct\n4no7WpMHJjIXBVSZId85Q/ozO7lR4I8y/ChO4qMZBGOOETQIIHK7MBxCPlCY\nR9ItjytNx8Cs3hw8oWl/HVEv3PutiVFMqV9NfWW0PSzJmlhpJv0A732BKFDo\nVCyTXrmfpaXY2135qDEsBGtoHDLr5Q49m7mL4CA0uLODWvVaRBZi9juxa/dr\nGSOu\r\n=rTMe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBGu+e/bW7RnqU8c2ZmNmoj5F74MANaSX8uzzZUZnEsLAiEAil+lhBMK/kxGglcF41xXxAx2fo5lVFZNPiAOpH08aLg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.15.0-canary.3bfc63aa.0_1588702441618_0.40344383047138654"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"^0.15.0","@material/top-app-bar":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","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-fixed@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-rz0Q7/GmO36ybrWPhUEFDXAkV+K3EE7c+e7TDxlk8Rm5ZAN+dlP8U8/Kz+iOXQVzydqAJxIFzvAD2mJcVzuUMQ==","shasum":"50fa33c5315a1f3f345bd83d615053afee0ab3a7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.15.0.tgz","fileCount":11,"unpackedSize":29358,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepeCRA9TVsSAnZWagAAyZgP/2Y2qNcvS8v+zclEB1mW\nTHGxM+wllDwaT6h5f1ZyRiXlSBLm5gjETSRHFV055PQNBf7FLbEH59qzJKh6\nay+apFYycW3JE9N/hYr8iIXHYw3JW3BKoFa+z11MW4YTn+VY4by+D0OvGtYe\nNq6xmxp42pbOUsrkNxiNCYPg2iDcNr/Nt0HGycSpBXuoGk/z4Nl/PgltXynn\n15+3JXSh3yulXuadXF5DIw5rwMSpfzm9/Wuy92bjtZCiDACHQol3j2eoaTTy\nPwXrF0GdB51igeDdwXuXxGPVqV4lU9FnngZeiFZjuYavVvvH4SesTkMk2tE9\nz998H6GVf6p0Zkv3Ds5tsaUSWBwB/YR9mfb/TLopQC0mdLBykAn6uQJNwaQs\nB0itVX3o9iDTL2DD4eiyRIRw4lNjYKHgV4hDEGBm4sF/wf8tODAqDFfoDed2\nGvHA19fEtSUnMd5N+943EvujfOttD8Mu2c9e0MJ8HrF8aKOfnnK3gna1BqYB\nJD8R0VB5tx2FLvif7b3igZxDNjx3h0z5HhlOeT3peDg9ertiNHGAD3wqvmiE\nhphQ82zIrIi6GnXfIvqhylIvWC4WGLMTgvd2CVQSO3QtMmN/ConvS5cxtiko\ns35+Fih04iHVNYU4TlVrPbMJFuoyJf8PF5TQhtMkPFiAjCZiZ0jTBoQpgHh3\n2cFM\r\n=d1c/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEqC0j+EmZ1pn9Ml1Nuh6WgZiFxdITF4KKOa14dfZ34HAiEAlT1ZDQ9vW5YCFLuEBbHqCu2+JekBG2K3cJMtAP4qxl8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-fixed_0.15.0_1588718173586_0.24450373638070588"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.1f4e3d1c.0","@material/top-app-bar":"=7.0.0-canary.8135cc085.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cddafa9ea64276d2774eca727578ad51fda9c366","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xtbNQ9kfhDM7law35lMW8iYNP9JQVylkhwKbiIjwyIHfGpTHfm4GfYa2HF1cr0gx2HB4lvns+E5oL8vnB3iamg==","shasum":"7692f39256e4ff2170d7c20ff837cd5bf6547feb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszR7CRA9TVsSAnZWagAANw8QAIcGh/V38TXxGkrV/DCP\nt8jzY5J9wkWNPjue4VSaA2QW3hCGkH9re7jPVrSH/xaGwYlVk0Q1JafUEldd\nN2lIUD4s2emjO7iQUuYLUS5ZgYXxFCdRqF5Z2IzCFM8qBO7+aoyRKoITGxvQ\naB5HBBzG3YLOZ3YUObGfeHVtr2dZcnFHO8PPWwY8fk1kAieYH4gQ08069HPZ\nRRdf9ef0o2qW8PeOts8SZI2IDB2CQHxWl8L1jmdld8twPhifzzmrRwsqbXV+\nTGioCFqFPgM6083q3V2s607wVHhxWU7ITL7je2PDUDtluEOc0wUt6BwtEmLT\npZ6KBKe11irmRoFGw2pHUvYl0z4M08X2DGubRG4SQjR2qWedNZSJR5R4uKzu\nQrSEGA8GbfD+6EuT7d04XnHw0uVmLHS9IpIxxS4GMq9xJpWBTeWZJDVNblnh\nSEbcyNuc0qPzu2CqxkJQHQ1NgZelEZnJ+2tw+Q8jpbIE4CgOJTWl35EJ9R52\nTiPUtlalNMSLbwCAnywpDWe2CAu1HaNvtjz0u769OmDAyj58jjDTKwZYXzOh\nTPyx14EMBwFRd8cZ7qM2DjP5UX6SE+brp+8RDoJIDZlbDbFz18rI4vtcltZd\nEBS7WIbeGLVBk8bBdTY4/XtfjMca2hgPAoe1xU1MvL4gs1dtEHCPX0XgRS6Q\nVn+t\r\n=7r5S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPV1m+VDKI/5RbFPIhWWAU3JVx4B1NfrXaJlB+xw0BZQIhAPyK4rCectZuzikcrU0fZt1lAF3Arh6pUC4RJpM4d8Ge"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.1f4e3d1c.0_1588802683540_0.5736622452192592"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.bc8759d5.0","@material/top-app-bar":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bd62828e2f7b66a127bc0ab165f32bf39b79fb0b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\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-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QOsa0Qls+zpPrA9R/0GLb1QpnfaWvENyU9UH9jsm4QVI+incRRBV6cO2GtAsERY2EioulrOb51P+oqwvtlmfmQ==","shasum":"d37b7e23711e3b63ac39550f61a00acadca19022","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.bc8759d5.0.tgz","fileCount":11,"unpackedSize":29410,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZ1CRA9TVsSAnZWagAAyhUP/A01k1rff53Zbm3zqr9i\nJaJP/hG1D7i0sIg7Mi1ZFn6gTZxhVgTKVzoz5i+GnqL/pNPlB434/Tp+nn3J\nzWY5Zt3q6oCJ2h5KBZ63v8AXOX9FD2M7E7g1N7Atx1A3SPBiJezzub1oRKrj\n3lFjLYgJNByaQbXgEyvYfeyAIbYTFEo+9DKIeE8VjGSH5HVdIHjfOWA/1Ihj\nlmfPs+yjxFdB0EJyg8W2xIrLPNmmESN5NiG9FhuA+dfAXUs4kJyyKbv+qPFh\nT1Pwl5gK/k5nquxJP22Yj4EWUxW4hExX8rViN2wHMv2uQe+OT0RtZ4nLNSB5\nXk32zW8y7tQKtBrSs/DU9DqNAncNlCiCD68V5fSSSvmkljL2b3mdj2yCD3QQ\nV+M2qAZl2tqm6lNn4wNH5YtxFYdtnUnwdVuNbzkEL910frkq4GjU4ijOyZDY\nCUJrXHJ1Q59gxJQYM07QVEuvwjeNJvs+VpBpjwwHy9pAOsAaqVFbRCpflfkv\nmb7ZjhOVDqSPg8ilYnbuSxi2LPE+Wrf/VGYVf4dDkhlaV6CNsspIcxbrsjXc\nexwjxzUZPksL9swtqe6SReVEFwRC8bnA5uJJxu7MLU6XMHKkD9mu8kdzMIsa\nbF5rtze9FlK/Oass4E4PgiN0+IMGmEPf4A5QTX0MdELbMfzmlq92I35407oP\n4eJQ\r\n=N+F8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA4j1K7WVmXZilMFGIe/xOc/LvFyD4yxlQt108ayPXQrAiAba97l/VrJFrTcqIMOVLuUn8TGDTn0gnWTZ5oR18o28Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.bc8759d5.0_1588893300979_0.8412658200210872"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.d1379acf.0","@material/top-app-bar":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b322d565d0668b9f1c4054abde8984cdba4ee4d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-L6za1Efw99Huzts632vdvOCRJxBlNWGkIutfZGYRiXEWu6owAhDb4vkh5TZt/liuBP4+1GnWx3Ni/rRIzDrDYA==","shasum":"f2e8e354560f338694bd0cd53106d600a620fa4f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.d1379acf.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZnJCRA9TVsSAnZWagAAVaIP/3zAqNDMHXakhOEixpg4\nstOJ6pK2ARXM1oKOIUJwRoczgIM+jTktHSlZTcN4dJ1ETd21KqnFQ6wHCdYC\niby4u3CNIDbic7AKwCYkwJNV+s9XLUWDSgLryTv7a4lAqqZ0syz+U11Nv3on\nvWcNlC70Dil0k8BAxiOpqbsOvMKkwawjnIYYckZCsg1N7bP4aqTiGscaOIV6\n6xcvCPuKfImbtCZEZi4aN9A9tOEfvwGWS188YuHWWtzt0Z6fYCiCmAhNPWBt\nYPLmjYbo8u5smALzQRi0xfC8UKxNUslNrL81ac2NF6RFbguVSR4URZP2C/+A\nb5oWShma0i3XEfCmmv8kHreEzARGexsxKXWZX1+WQN32Yr4VQvrOgtbmPh1n\nFBIdIMH8JzSG7yaezcraF/6LtZpTKluDcY3gO7j5OIEgxBbFSdz7Lhp9bBLJ\nMrBEeT2tGVgYGMOfGSQ9dPGpDvJlKM6asfRoqGO5n7cGTCnU1HaDFdD1dytu\nv32wzjt9aLrU+EqO9uJNwniY6GF2sR6IVSxmmOHrzdRtRsMnaDOuGEnoDuuw\nqcS+MHWIeavI2crFgJ6kRHkLOTn+uYROxohahvfsdWatV6xr/GTv/sbkFEhP\nEQNhoZOdJqsSHrbQbdOm4w0r04XBbrLGg8FVmk0DVq+lvFLpUe7PJmrc8IxD\n+NLB\r\n=d3iu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8KzakJcKZRlrDiZrAv4EM2Nxsr12rY50yu0HFdR0SCQIhAMPvLziZGJ/WP76axt9ccOoEen7qC+AwojsRM87NZ4Xz"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.d1379acf.0_1588959688827_0.35827056608278585"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.58d51fc0.0","@material/top-app-bar":"=7.0.0-canary.047e6b337.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"095d9f72ab7ca9994ffd376ac6b1b0daa4c99011","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-If06N4hfkpOOpjKv3tFMquDoN2RdQt6U/IZatX15u6lJ98dAQtLuer9+jsQxO2ntQswpJB7WNRL2+fPtfanMkw==","shasum":"4f3fec9524ec2ed7bc8f98bae6f19aed5c3d7db9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.58d51fc0.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbBaCRA9TVsSAnZWagAAMOEQAJL2rFkhCmqKrMVyeXsI\nhU/vnCPWoP/iOGztf99yrCYekAeMYYlBI/Z2zdIW2USGlHKfl2qNLUWe71XP\n75XCQxp6rcIkYwZ4rLQS8/cuLkZSH7iBROksAglgEGLxYjnXvZJ/efZi6vw/\nXkYGs1o9tUg3hs5kf8j6FYVk6fFaBpR8pC/o0ssM1GK8Xp8DMv562+OQChHu\nRbOg4f4MjGiO390Au+5fXn/lyc76OvJGGbf5sCrdNiNcuHsZE8xPh8rS7vXP\nRRtJqrGF7NhF1tnHLPRUgrSBE9UeHA5qCMVJK9Xp12S3hwTSC0rU+tpc6jDU\ntgv4RaEHleyvFk4/C8Q/KreJPmsfsKgPwM2/nQblqeSnqu8kY+Yz3SbqjLFn\ncnr3YcJXkROF+U76/IXc5Dhu/y3rPrtbiHhKlUDlvoTffG973m6QU86VmV9T\nM0oDfdpVvpgwgfkdyMOuVRSOWL/7GZ8ByGfHEC6mcWcCEZo8xNwHOl9Z+oix\nTMLf1q2tLfE3oCng11gEzY749pv/v7oDPMGiE/SWv5YyRLJYIqsvVBnyGzOc\nOyyYR48cCd/Yfv9vv2VrFyIzcp7vDHjra18trdhFQ6oi0c0E58ySrERlHV8Y\nU5uM9fcUlcDDc3Qa4y/onxLIStTB4hcAHSEBTKbnsKX4wxh+afAIfmSdrUwJ\ntpBe\r\n=gLME\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICcBsCrewk2qLBCtjY6KwQOXQS3RJu+xgB/j0/Q4h9whAiA7+hemb5OEMkyTUhHw6bzY3GsE/Lf4ZT/XEN3dmttYNg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.58d51fc0.0_1588965465567_0.8569625028651877"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.588062d7.0","@material/top-app-bar":"=7.0.0-canary.119e21426.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b66fe2af3ce7c18a07562e7ad2469074135eec3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8+obQZ8a1zxddlxOyNRUmukYOoDWZrok2XpeevfL4DPXORM1MC5nB8AAG53aVu3A5EBabx0sI4xEuDepjArAwg==","shasum":"28e0ed1427b2559a1e03525cd3bad9a4c4bd9e61","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.588062d7.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc3zCRA9TVsSAnZWagAA2gkP/2R+b2iNQ/Mo6042/rBA\nu4wMJivGRvdLDNqlkpdNbeByYN03k+9bU8iF72IwEW2ntaQ8KwacFJhYFdxC\nKcrYtpOXGzsIDgXi30US/KcQo59Vpeb7e6Z4a9628/9Dl8mKKhQlKks8AaUa\n4u8u05eNiq2pMFircP55Zd2lUxL3ryjRnzGiWU1mRAGVQ80JTm93jEavtbZy\nze7S/1Nr8NvKl9iLyHnKoZ6MWD9qumm1QfPy0Yl9s/qV+5y+CFxom6KE3gYy\nmKBcCWX7tmmgblKwhUP3KZVU3J24Z/qVEH54NQ7+JyD7J49Mg/6LOCsvw3N2\nSKBC2DqC3OQll+y+Bo4O6xW7BVGxkxV8VjnWboKH2hZGJticV+J5zCZcNsDk\nQbJtAlqUUrCUMm4eUjx1ZIZJBSh5TQWPy/wc1ldYoXRRst2em67/qvULxdcq\nUdGg2wLw84FYdYZ5OI6h1r/JMVXU2CxG0wb+lKB+x43IGT5cK5v2wBaK9NTs\nlU/A64Iyycxz0e+Y+OMDtKod3/WYwdgL+ozXSzsdzZZhowY+4gK9J1TxBTI+\nxsgavTuC+sXVEdoKqiSZepBhu/e8wkVikHnXay6RVPkM+Jb6oPdWOlCn2RTf\nHAHm3U3/tLxqAH6aVZxmrI5uS4JcG2G0bpAOl5LdOZjos7FCVfzEw9jWXf2R\ne+tf\r\n=aHCG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHIweFGIhU4bncaRe/jtVn7u0wMXnTBXEInyi+Z3RYonAiEAx50oBu+demB0mdgQOBaPcqF2Gi0oZ5ioGttTtUwB3s0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.588062d7.0_1588973043478_0.7508450764905958"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.fa21f639.0","@material/top-app-bar":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e20cc975825eb5a02be956c28db1cebc2f8908c0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-cnN9bBdFPcdqmV/B0helLkAH2xJlsX1GasMlbq9aw9nV/O7vvMNUk7XPSnUlIb4+aezUe8QN9mhoGbwlK8ci/Q==","shasum":"4b7efc96e06e1c956578264ce5b843394ba7d870","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.fa21f639.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYutCRA9TVsSAnZWagAAKRcP/iIbgRBBpMXaujC0aZjp\nUQyf9wVRks+XNme9Uks3f/n19TEAU5g7Wfm3zXeHSjWtDDKjUw7pib0R7+Fi\nrnRjG44GoucHaF1ZC+9piL5UrzkyYn7M3n4LpuTaejqsAtNRPeSU5AXryG3V\n2D9mMAJLHfvIeyyj8g8/41zYKx8tnwhGlA+PcNEcp8Go+fzw1I6wBF5fO1wU\nMEJgIK08omWYLIN8PvV3+hPndbUG/53mnvOAMI+A8a3DRgl7pt93WHlQk5FZ\nkHS575o6yR9zF2gDKnR1EZdzT+UXfDINKmC2BKo6wK2HaAHqcOaOPt4XIMbt\nqnKQdBw+YPLnAmz41/C6hYe9rVdPL7ozmmBrvdhFSHoJYnJ+X6lfXky6C8qr\nvP33HgR5kIyhGhEOQp1QetOU0hraSX6lluFVdFeM7JuD3dQTd79bkmGBgGkx\nQT0/AaHk/Kuv1onn+/PCxTYK84Vs28/hdbIR7fh/fdGGELrfTwboS9BFaskW\nEBfbZRmM/w8oqUAjjCrG0hHiHmmYD2kHfyF2a0UII/Zgq0J8dkzVi5Mzso1Y\nXa/r8bRKwLnZ0u7Z7oGZXbsBIeH2loH9wnlS2gMcBPnJGlKTILH/Zi0V38+q\ncsXyTE3J4EI7FyZPpJhUCn+ZonBfugFF0+29tOJULdrd5WMlhUr+Y0UDhnJP\n7Cm1\r\n=PFUd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeiN275fFUpelrlvGDZj8Q+/xblTfk8vkaTuwmATPgHwIgf5OqkzWs34BXdxBFcheMF3qnLC6Nm7q5mCwkKdtChWA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.fa21f639.0_1589218220932_0.059055838175952724"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.2772c509.0","@material/top-app-bar":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-DJrihNVvgIPj979H0kuzMnQsOR2ZdlKk33lZBBRUn6HpBYfXQTX16gn6m/A0QkiBa6vVdyCrW/0mpBQixXx5Mg==","shasum":"2b696540406be45245352a924f7df0e7d7bcaafa","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.2772c509.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZtICRA9TVsSAnZWagAANj4P/0REuvTo9Vr6e5EIqD89\nhizuwGjomfzLvtbnrsp4ftDvawGeWGgCE5ojYMoRpYt8WF1B2r0ZvhCvH2Dw\nSIkAE2gjOhRrTj1c7HX2C9zNAuCZWUsOyNfkZYv/DUMePhtrRY6urGwsYyQD\nacAs2Tm8Jxpy28tMa0valBlCi0xDn3RMxt6UlBNKQEbuOU6D3S8tWhT6BY70\nNY3rDbfc/n78WDEoxDjgmDahHR3yWnN122XVbyQrPiEcqx9YT5ARrY0IOoMP\nLTiENxoALTDDg7aSDGQ5INvAutcKALxRFfOLoTgCmMIF0niBqoQzNMYLbidN\nRxuywdd336GTYTkci3WBWPgWKH5l3p00N4th7U7dMgKkH2QIxtk7SvER1H4y\nDiJK01QKrr07Yr23yw74aml4Ph1t8bEKnpXuAhGxM3Te4ijIBirkSmOXUzTo\n0MKhTOU+aqEY3dV95L3ginrBfbp5vAp1TGxEq3JPK2fGjLvviWfHVKVrKe9F\nPPV6rfg3EhWimGSuLfguDAa7B4v/H9gIJM1WWQl9HGZucdNkcG5a+cpm0nRB\nS6P7b4CpFQ63SdkZiIWVhcu8BkW9dGNmCGjLq+3XggVhTdW/skSkWv1XPzaW\n/wO0FS68aFZLilWKEDKpj2DkBDpvH0xIpcBu3TPI6IftoG3zimOBkEQ2H1Qg\nT/fq\r\n=0EHx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAb1Z14P5zobWd4v4J/QSBRv2dJ70F8xpL7CeKdP9sfuAiEA+IYDwcueun+ZkWAYLv0Cu0OOTmtFjw907TZg5+M8kFM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.2772c509.0_1589222216570_0.1632914174410498"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.fc4796d5.0","@material/top-app-bar":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddd82bfd80666625c1dcd7c92fe79f5de6f84657","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-msFKIOeFLhI3iafgTFS7uPY7SxJynJU6verfkkDtASpNWYDn9mtdZYCOPSzYyLV7Ox7ssFNNNRF9e4UK4+udyw==","shasum":"5e1c3306a159efcb40138bbb1cca58903346c4aa","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.fc4796d5.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubATCRA9TVsSAnZWagAAPNgP/0oZglvCCIPaMKuTPJuD\nrqbp8Jpvjl5vY8ROBqZFECj9wYg8PSTasZZ2cv+vBDF/wLZRG0K++l8xh5yK\nTth4E/38ebP03ODaskIPj1rFyX1eaKQyTI5bqweRS7wkUNduDVV6uOQOAlgC\nh0JKDrr1h/0+uAQ/eJ1DeuES8lIBMHgrTsGZr6cYe7tG4JDoke+SiKujO1jq\nq80QG12JJu89+2rBxyK+NmomluJgccJZid889WDvhEwsMw18R3YI4ypx/idw\nGFiEZXk6GRLE3lmTwBPJjB1/CkHQf1vyTp0b39an4cIjYCvbV9pp2sPMZ37D\nkyMi/An80r0CVN2iGnBwpABLOksUAbPyK230gp+5v2eISX0aD9MGdEufNoO5\nl3oMWVz5eb6Gu9hc8cU0z/Ie3roZFFyYaovYoe48VbnxrKukkZ2DejFHg32m\nFdKpu8E44icfgPmuTRAxuuC6pXGY0XoJKmfWl/jILjXwEnfBAr8vWsWK5Rh5\nxikBp7iIZtVYcBdkzQZNVoMD0aX8wG8fB0D9BrMBe7V4lRNEWUHH8YzIX5WO\nz7QpZNLsxl7vsp0sWOdzm5C8czczgYcjzUQy6R2z4boqJ4VhqiSOwiaW37ag\n/7USvugaIipP0hqPIPMfK9IgBQjlOpR8prqmfRS1CM6QHjm9z3Tmn51vXXG9\ntz4L\r\n=Op4a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB3PSQUUvTqyzq4ftaZhOw8bAhmXxJlhXM81/PfxweibAiEA/Zu6o8zMWHbvdqb4Efy6099hgqMnlaqRkiteSSS7/zE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.fc4796d5.0_1589227539266_0.3175299501135722"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.0d1c5f2c.0","@material/top-app-bar":"=7.0.0-canary.ed52af767.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"56733523245d57fa1e6ebe3caa22ef89bc95e8d2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VZvs8vm2z86CergwjfYYrc7qu+pI9GdDHbH5LKQP5sFhp0wdq7zCV+iZDj9ImK6vY/BbmM26IZF7JzNw+QoMuw==","shasum":"551d218fb3ace749593a70b0ad85db73994fb64f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucGDCRA9TVsSAnZWagAA+WoP/j8HKiEHh6LXHFzT5du0\nPkcEMQj6oi/QPX6HvWzuGv1hMh6rUyQYZHhIYCXqKl9cF+sJRhwjYWLF1cXu\n/VuDvfv5T+jB26hozagSd1nSJzE/znGnna4ye2N45SMJa84pn9/Sh8OUg0ad\nShW1OFmH2flfprWaBsMcAhSTGn9sHVeQIXanCLGBvfcMxgfCJIkuN/rkrJdZ\npJ2d5ffzgBBDWH5u56HPZNrv1keMfHaM8X1gP5XC1dHx3E82YVo8Zma4mCVP\naXRA+PV9oiEFQdV++q4vifyS9D5m+7OhLOQI2VdPI6DsK4wHZh7ZkjBUXDUC\nhm+DiER7MvbMHRJ1vQ/FOf1m8uKukKBkv2ypXQ7xVBehqxE7LZZteNjv6qG+\nJjTSkIug3cYxUD5UEb3wIOQsDzvaNktgfJ4wbgntHUV6EmKFkmB5YIdHWDgM\nwdWkQFyGFTW3J6i5agSnAY0manypdc6H+KzX4ybZJLgvGm6m8T/GOKndmIye\nJRNmXJh90dM7U2qx6/zKTGpdNZQw7r4E4LSz3FoLnyimJp2SOmYRHMmlotsj\npEjiDq7N4M0kPuqTgdmTNvYGxJeca5L0xbOSsRxLDu3wxS6EMyC34a8hSccu\nWdM4DmBIone0rzn91dqzQ3jAs8Sm+WiMUgMl5RyRoNYUlRXX9RhxHxzuI4eV\nZG2p\r\n=7FTT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICZwTKTRCxHQorszhbuJBRBdJS73CgrMMpyo794dbnhUAiEAlCwDfdDN8ZBwGGMV71G4BRzwoj5pjiEQ8HttguVAIZ4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.0d1c5f2c.0_1589232003432_0.11561986085371512"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.d083d93a.0","@material/top-app-bar":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"740c7f6a0f292b586689cce49e46a93876251b93","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-b71YPutfc1oTHiGz0qgDlpzdA9nskZwY6SC6Y7DtaXC3TIEPbsW0NJoya/dHTZR1NzDdt3STOnG3di6ni5RUGQ==","shasum":"ae94e89ed0a690a18885a9d28d18ac90732f7b0a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.d083d93a.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuetXCRA9TVsSAnZWagAA1RoP/3bRWsQSIpMH1JWWAOrY\nf55Nv6i8V3kxpLwdNWJjmpt7V1e+sifo0KtP/35cclYAiEjpcK1iHbuOKe/q\nwsx27WzkqYJQWJa1GIUkwjDYxOYg90XZWTPBTBFq0GGA5W6yU5/ZriaFa9fH\nLhYkErdx+BY3R8R4lsUDxuEmI62WMcbe91fXvl4BWqEDiFGJy8G80+Z75AbB\nDjYPZXRU3wvamK69N8e700F5pT507WmuWrlW61LcccCKF3DRGpZh4VLOeNOp\nzXOsHUR/HKILtdl96BsL8W9eKwx62ZKeXirMYe68N8GEFs8LBS3Qxr2Oscym\nG4/eqpM2Osum+3JukmPBWRAUlpqxmGajukIRKMmlZQ++Q9XFAcNesPODKpgE\nKAcx/swQU1ad5v9w4S2yy5OggP54qSxncW8vPjo4IaQ3CiF3t58a6Qq/yO3P\nMaqC5jwqNHiZ5jhexYK17L+mzCPQGGqvK8Suq7/l4a0zOWIRHwEIQZ6fzooi\nJyrdqLKn7LXcuVOXjwWW2jk6UWZEBohDOankfnE8o70a/86CedTfD8VJ1XoH\nMkvQnxiA/dY9nQy1/FrdQChwp/Xan1GWcR5e2dZftylPeAuHNqdtygxXuepj\n0jWGQjvsAR5nVBIOqp7joQrdFdHdu6szNt4GAG+WgP86A+wfjI0+2ak61hMx\ngG4/\r\n=PTI0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCraT8jO47xclPUQCE1IiOieraXRmM1Wgd3Ja3kucs0ygIhANjp8ryx3eZuvIYmZCmUbQ8xfBfHXc+zK9J1td/N1ugd"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.d083d93a.0_1589242710652_0.37267300326965924"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.c95d429c.0","@material/top-app-bar":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OpqjcThgSz6biSaqHBaF9kya6nnzUAXjwvHT2LWFnF0fAwWIAK1ZNUAQYPqvcGuapX6uqW1F4LwfZfHHkSbXjw==","shasum":"e5133cf61010c012e9d1a0c7c61e02135b1409ab","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.c95d429c.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxcJCRA9TVsSAnZWagAAhNQQAJ12e7Asd5UjMqok7y34\n7X1W5CnPz4lIej2AZgjCnNigO60iNvLlDRINRr4NkVbRAYn50fh7mtPktyM/\n8pfbctOfcbWR+Z1z0dnrCqBhlWzibNZUasUXvjpLcpFwODHv9/heloMvf/eF\nYSQlLzZer941/8ZtByfro2I1rzOxK1s3VfEmz5/4iD+jwQPbZVS1PdFb7deW\nt8cl0KmArNB1SSiLs95GVpcHxnSINx91ba0wqq/Ovaa2l3/QdglItvonp3qM\nCmI6uHRX80NCVL8lga2t5W71xdY1eJ+1DC2NwhpYiCZT+aerSiWyk0aA+N4v\nOvJ6PV5w/X/Mn5nbqWjL15CnJIk57tBLm+JZJmWH8yAYeEA4R6yY22y9n8r4\nG3NfRag68/szTR7aA36NlkfhmVwEHt9YaSNY1jxaKnK84c51By9ifibGqMJD\n9dsw2MRLu1WUfcErOmAnpTV1TzTu3vxXfk4N1FvwImITYb0QGyTnt6v3E5Fb\nhTR0Lv5S5r9EXd3dxx7V4zshw+lYpR7pzyP+9nIL2cv+jC8nGRt9QktgZoHQ\nS/soIP0jQjBgwXMSfHMv7RPvZsOSNA3eZCuGvH6av6QaJeCb4563/MFJpeox\njvRou+bMPpmePDeRX/JJd1sPb+hUjgRj6pROHZoB7b3omrziXpABFX7P/tx0\nPzuC\r\n=gCrL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNP/OBkwo+HiByliUdQu8Ct2vX6kIRdTG6gVDIKGyxoAIgThgNvuLURcfkGuLTHS3q+u41ImRjFup6IlUPxW8UJDo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.c95d429c.0_1589319432754_0.729184828954925"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.0c1ad726.0","@material/top-app-bar":"=7.0.0-canary.0a371b4fe.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c86cc2738d0075eee9b892c5c2fec842ae62e41","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VTL7WysmHFvEqgzDvm2GFK6xWYEbzsPbXJOusYz2rWEsBV2O0LqewtjwhcEJbRNdXgLFKa+AZa0cHiZlmjpZ2A==","shasum":"a1123ae4929e03d260618c18f55de711c9175bff","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.0c1ad726.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0CWCRA9TVsSAnZWagAA2DwP/3TYxCTkr6zuRv0Vl15U\nmTlZW8RpljegnTU4/im2G2vqD7tnNzjcOgSDe5MWQuxgx66SIdAtst1zo2jT\nW6lIfvXmxFPvqZHwTi6owtQArDeINn8B9WQCjH/LPY0+msVSO6Jpqy4hfONq\nL8NKRVtM/VIYB9XXkMOpy+IU/ZJZtSTbDAMOK54davS/mhDf9Sxep9EMrg1V\nWF8MCMymIwQLATG+HS3O5TurpxY4fJ7MpgOx8Jb/WpHJoiATEyo7PuoJJzzj\nqy3AZcrsro5PfWFbColItt4oFn/qAna/DwE2/vA/AsvC4QPTD1tb5HhesEmh\nKBxOhwg5Z+wfY983ROrKv8rTnpvIyxt7FV1SmsgDp1Hrm0Xok7FlCaefel4W\n77LVyBA37fpVc3ADXKnABOjdeglNpf+SZAr3KAPucJzfX3yFsQDgW1NaekZZ\ntCQccMVEkoID17hxAdlkmPSqKTB6kR8dbvUyDADJEmoW0/wgq3Jw/Nhq52YJ\n9h1mRBtbG3SOimau1Vft9s35aU6zUEyY0uuj7oeBBzGXeJyllAaxNCYeBVYf\n18sdXGjhJ5rJz54+Sq6h7T52uJuHH18SXsjD67wxx75+6spP7WLpDIG+r19T\nUzowtslJGSPJA/0MX5pQ/KNK1tw9aRPfDH7I1QwR2lUi6XLtSUyBznLv5Qix\nxkhP\r\n=v427\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHkxIGA3OUWYVm8sZj7qtiml0iP6BxDjUXCW9QR+VT+sAiAS2KOXUDlpDcjps3v0T8pFWPJngCvmjTGMSfsE34tq1A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.0c1ad726.0_1589330070094_0.9239710148486233"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.8b6a4700.0","@material/top-app-bar":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"268d44b68432688e310671d956cf5005633aef47","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YbIYSnSZYGyzmpowhWgT9WJ7Phdx3DuFw3X8oYllPvbv1GetZtFmxpxqWVexK5krC1Ro+bnjsmty/ewDIw3BYg==","shasum":"ddb4fb85b8d7496df553e47fdb0d09eb9c578f7d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.8b6a4700.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCwxCRA9TVsSAnZWagAAnHkP/0qMYyfXilqPZrQ9jB8J\nCru+osjVE0z3ThHWIN2E/dhtpmSPGcC+vyCqruOoUoWYKcE8dnN3Ai4+3+s/\nKQxwY1+71vrSzojMJe+V7qoc5IqJiCib4ElmOT60VtMsrSY8DnsveNVXmp+T\n8OiWmHeSkPWCjiTN7Zc/FsjfuItIkk99MyRp2Ny+XB1DbXqtIsQZ80iBBsBS\niJMtZBCX6Ap8ajkzRK6e+cM5uvBWJepnLs05EFgZcsKt6N7sM9O2vk/TEP+u\nBzIjOS+2TSZvZnDnJFsK4k79UPYzmAzBdg0nPkoVQwiySpkUCwvktSTMvHBj\n8Wtd1CWNDoqM3kq8H52WbexKBgff1fVc0zAPgisnRLOHAmNhkMWzKXpMdqdd\nKbP1kiHmDndC/qZpPP3WUocUzTDg+qi6kpymt+MTRQpDJP89Xti5tMMcNIiu\n5CX0uv3MDeDKmMooCDLbko8rd7Q2S8+RXs/Ik+79hhl3AVUmjTn1O6Vfxgvg\nKfdHEzvj1jnHbZdr4ksa0B0HYwdyrKdEnVRh8I62Hmkn9DFLCbhWGLyxCBxm\nhi6HXrwrykzXxTSn3g8XJ2/W9yjg/D1yNEKqRma0uJEK1StJsfFdq8bUFXVs\nzJbzOaNn0SKIVdpaii7yjgVweIo+rGzYPGRQvHpU6BYZpWGOxN888A9pcROT\nvJxW\r\n=ebur\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAuim1tkl3IUHiYkg3cbyZAlH3di8XiimRNufA55YbkqAiBRF/jW5qd/y3xPmlwodiq5U1BLhB/YV1qp5oPtTW6/2g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.8b6a4700.0_1589390385362_0.02253842285392138"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.3270effb.0","@material/top-app-bar":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5c72bc76b8ddfb71726f9139d6105a4b108b7174","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZYbPBOGJ3deFzRkVgRq99JOpGYwcmM0g85PK3mX93Dkc6v0KX9HRvXMScMZRsqhMoJacHDDz7jLUf6ESbt08Iw==","shasum":"86eb9afcb39a835c1606848dd916a24ad6e49d79","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.3270effb.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGWnCRA9TVsSAnZWagAA+DwP/1T96kg0HbZL6aJI9LyK\n0+vf4kwNisFdIJ1rUdBSvYjj8xA9nQY9dACtvvnpeF0gOt6GZOmNxaKkcOU3\nqLlC2ERudNIiEzXsIM8jdGEqs5oAUfzVQli1SfXrtS8j+w5JX4TUf9NU20bZ\nHqGV8tetwWL1uPCVoY88TUjK4Emus1WGyIDfQHeH8luf0zzpXtZnbfQ81toE\nQ7YvogGUX4+vdxkmyL+ZxAQJ0SQUgOAHOe1PFs7G7vFu7+IeMvWJANuzwdPa\nG7QlBbNtJQ6CY4qUj/jCp1Jtnj/F1MY9wtORVqBd4Ezs4EEJMSNk66cpXoUm\nMDr6/kuDN6fT24eVoX2AA/0WTtkq0bLTNsPDP4aAPHt/XkHYGnVpRQ/FfxgS\nzZlcB+jg98TrQIDf/cP8qacQCk5DkKQSe1k6uvyxziegnCLG00Dk4uCXyd4m\ne3ryhPLxEnpkVQrcXf1flt/ow8nxmyDGtWWf9ZX9GnWo/4GB107WttWj1lg9\nQ70eT9p955EDnQBDeTynqGoifcj1/VgtmYBfvo1AwZWgvRqh7G6bqahNwCZf\nrfayrcOL+YLByW+RjYwuOywQI3xM+9ZKkQSnlZNDed6jqIyq8F4GvSDakQHc\nCfZ2RNZOUzlyfGCQb4/dcu9pFY6GNHj+LrGSeDEkqNX3sZMRMiz9eLEkfVhC\nP2xO\r\n=uwis\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEmwyjdTqoYpX1rqYu7/UW4WDZlxBro3ke5ItHyQz4VnAiA0q/MCJMRX6O+RqDiJpU3ObA8t9ILhym3VKBCV2r4XUA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.3270effb.0_1589405094696_0.6012085138712235"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.832e64f7.0","@material/top-app-bar":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27f7d1ac979b6af26982de92c2f2bb7fad00ccd1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-xi4APFM7LnlFN5BdLPrGAFbmhw6kkymeZCJNMDDS8gdqGaF1gyrwQYWqDBf5SntQviwrWQZrI2EE9fUo6rwGyw==","shasum":"5587ecccbf472e3342ac50074d4f70e44aed89d4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.832e64f7.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJZJCRA9TVsSAnZWagAA5eIP/iQYJkzQrq58ZJuHP6GL\ntu0ck+6pRjC1zTENqNozCMak7BWvDrm1lQecUzvTz8cPyzq8QsVxC45j3BKD\nFWd3UI2hZqA+ga80rZZKDlkcKiDp51hJVjKi+EALOMDw4Qi0dK48pgfpmmZU\nS+1SAYxdch3QIKdiL55X0JI6512r4A0iBp7dPPa/lT0LxslFJ15TDRDuKo0q\n1uNgDsF5IijA10Ael23i+H9xaG91YGGViclv6zzTVGOwjuoOAzRNiXKcML4e\nYJP3OxLSKfC8HAbqutXoxptnHJUyImfVEOpiQ3m81HZ1tzOrg6Vyk7Rhb0vA\nx1SE71FA28kcRNfcDzk5Bntem3/1V2ZwU6AEgUI4201M0n0noHoxi30CoMLD\n51JlYEIc6fQAU2IMabNoCFq5TG5qnu/iHr3wp0uSFDei0W4sgaLIJcWCxLCh\nYe1reqL7gQEseWq59eeIltyCirx4ASZgny1qq4pMmsJHQzAwzRKER6AFLv5J\nXhSFQsLl5fJQF/nh7NWHkcPV6PvNiQxIxw1+NWOtdwhG8okmjlQ7eiZzEZJO\ndiVC6V70N14L0bs+ux5es7GiOS+gTjgvZOajN9YPH48HuepzuQUJjQF0Kwkl\nN637oIcbUE16jh7s24ZuLbXTis1ovMFk5R988lJ59GP063UzMHHJUg1DJ1Ar\nai/e\r\n=oo0G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFgcjZKzY47xwMi+M0Q9Wn7SKr6Pf3WQDBJMjClP0Y24AiEAlsu2d5FV80N8wU7ByyMWGbnHgCJFQ8/Adv3PcjpiMEI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.832e64f7.0_1589417545138_0.10069567215259978"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.472fc4fc.0","@material/top-app-bar":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0eb6479ea05a7af0418b4fb939f915e39af03923","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-KOWfV08tzctC5nuhxIIx3lRub5RgYfRXHAuQz6b3phD6V/ZJ7Df570hfXV6iLR61IOea7iZ/B/Hvxo+HiOhK4Q==","shasum":"831463a017f6b8ca74458d05f20ad77cb718828c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.472fc4fc.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLzCCRA9TVsSAnZWagAAyZwP+wQEMGU/fTytyYvsp7tT\n8p7jPEldXA1pApAzlFGpNdZei8f1hTdMOiV4gBYIcqXRYAQSXJbV1YHAAvhE\nJNDG/FXz5xXTjyDgOieUPPH7y+soVnUfUdOrJcSRHsLS+FwiqzYdSiWPVKrM\nSn5ox08GH66h9LIiYBdZqw4QyWbzs5jIrc3OsmBoKrREu3palIBw2eQcwzb2\n+4DXqpcyvhn49Al36kdcy+/Gq5l3+YgsNCYzAb69zbotHjgKeYI0fvtpdXq9\n0+j0nxNJ4tQoag0Kkhh3+OiQvOQAj/NQQszSEONGtBHCYP7ViTQFHc0vFw91\nV41kBXywKT5Cg60tpmTrdpnzam7E5VCd6uKV+vV9WCuSsoyx1gFK7DgNwlcG\nMI1ATwIvVC2XQh4jlPJAfBTpgh0Cluei1WRZfIyFu23voeHVLZ+lDaGPp5My\nEEw2zf9pH0eGD8okWCvqAZUelDmMSAqYHO4RhtUzO+dVkreSijlmggpKFE/K\ngdzEBrTLs25CYYS7OkIgyid7fe0iFmKxpQkXERu3PSeAIVp+Og/dQU53Jg7c\nvsiDINvWeT1CXUPhAlH33scPqUOIHWaexF2XmeLKz7uluq7Pgcd7b/YrFdRs\nYrmavFdVLSEnNMwqpJ7X0na4us1qUUO/hbP40lKSEAquXJFPC3gzRes0NZ6w\nUd8o\r\n=ao2i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+X397P605r/CPl1+wlQm/BCVyEScVGjKZhlzIzGLsWwIgY/5o0QypjVtsSPVr+mKFfRS6YdWoNcV4PibuAkVozDU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.472fc4fc.0_1589427394287_0.1873478621729483"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.4dcd7dd5.0","@material/top-app-bar":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a2b512eab44e739c09fa66cee4f0a65698e697f2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SeTycqYerSbF2OdsUZGLG/HCinc+pmPCXYlUg0FCREeCV6Ubu86hEVedrFyytwjO6fBHRDDDrYN/2F6uBEQqJw==","shasum":"ad876b9a4c83d606c73781b2c2252cbac7859d49","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXDzCRA9TVsSAnZWagAAsAwP/i7uLqqGjAXNmSmbv+Uu\nH0s1cVUcv4J71EO1QFGUxpRT1UMHDFxENPmtkosNaCTSCvYAxD6tS0kJNL57\nHdjmtEkIeD+R2MDlUGpAFHLI5bFmsJsbnFwyeTsZDCIlKoEcc1HfZQ/ktSZs\n7EMyy/oQDzYLT3HvJejcbqRrpKjh+wBmfw46mgTBpgYWIfqKRwUzva+yvQTE\nyH/GSsOnZHtX1qR5Seeb/xi+DDRc8q/Y2bIhSjkEjpbCI586AIcWs0RhyzU5\nBZSkTSbMG1WKiJWZx+y/w+q2tdNJdktLsxj12vqtKrA7uRRlHGUd3jXotXN6\nFafv7cOUHCkW0/cN4N/td67m8INFQbq96rR1Wg6Ecr0OQmI3qV2DkY2q96if\nOpwcxJoWIHscsgwZt3hBFBvGHqaIxekA1R1CRAVplb/oSJzWOkTUUtgLnjc+\n6y7VMAUNm1N4xx3McHRyjzSp8htigfbpCEQXcLF0Ce9fX21+QxHoK9lhmICm\n8Edy3ffpmOpgnqpMH10Yj/tqBH7M9Zgt6FyAc1DogWUVz7A9o+NyEAjETgqv\nwWdoKATNxJA1eMEUwcKsIp8sfLFHrM60sKJa3ildpfWEph+quYxTRSBTl9sM\nU1xyCNOfjxGQFam1Ox/kP8pOxED2I09pZpMNk7eG7DGYk2mnKbZMSVYDIBy+\niIHe\r\n=ix1c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/VOEO9ws9N+scOIXVgc7Pt1+wVQxR6H/kJgVaI1pCYwIhAPXk8bYoXm6svvCEo8ylLwz7Rn048QaPm3SM8bpOA2oW"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.4dcd7dd5.0_1589473523426_0.8635695484464609"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.bcd3400d.0","@material/top-app-bar":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dad5f0740d5be7e0efe9c5037afabbec57771668","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9pmvZyHQ18ckoBtW84DdXTosnitn6igYlQCTb4ucWlnTHzZkkfWcBDA+f3tst/YAXPnAbYjGGcKTWq7TvQWU+A==","shasum":"2f3d78d8f6972648aba484a6b78b61ccf8dd0ed1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.bcd3400d.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxygCRA9TVsSAnZWagAAFOoQAJ4NhFnqFZiamOTHnXGR\nJpIRmkbjUgD9NSpY/kEj0ciDZGot5cj1ijP/7j6DLfcZD/gaWkvqep41ykF2\nEfdKZlJVldKrfxUANZb8pMDfOHTFNrsfiIOpqAaMNDWlc0pK14EUYmSeQjqp\nmnFKlAbTW6GRlmPjZlfG19HOCK2FZsRtO8pTLb7e8snwf15CnGNLqYN4oT7p\n9555QkFlyecrY7KagMdK7oo8LQNUXVFnrx21Us284uCU0HXzaKgh7j45jwYu\nYvm1V9crUG1Xwrq36U+aCOviEXi1EPMdgVlCwO03NKh1iAhtjrEoPdXbZNUr\nUEKt45DlP9SkyDwcocW99esR4smTgNMDCD124txJSivsyN5Xlp7Bc4BP/zwa\na9h+bUQT/K/4o6aERZ9m2WCh4OKeOjnHlnHQfly3L1da9tnK/g8ZbbbLaDuX\nGIKlEBv0Bqnjwy71A1IsFby+GpXEWw/a00Gpxjx/hgLggaEv0Y+cV1Gfiiuj\n/hCcgsena/oI9XhmZn4mSXzgBJnQU5+k4Zbs78Qv405TAJjudokVBsf6O4VA\nlrhY9m8vPPwjVWCdBAXNl5CquZ3lYR64Qr9Vrr18k/KEDvF8DlNHcSMoKRti\njC0eTV+8KLM4UPQ/j0WW3TcoRMlF6PtPCgxXwOgWL4aV0cTpSpVnzOgvVJVs\nyzWo\r\n=WWPf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOnY1qplt+5aPx0vrntLwc8LxJ0MXTl+Zyl+hHtLicJAIgIcf8sT43/Gf/62P9J895pAASqQK8mFDZk+bgm2SJB6M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.bcd3400d.0_1589583007591_0.061177301856374156"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.91f63179.0","@material/top-app-bar":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0e5622d76bebf9f0f121549fb3dfc9bce15378d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-R/zhAEoRH80+Y4J6lqSyPK8xTc/vGia6/K/tFVYSbUe6wLTi8g7iH5ARAdI4gLig62+Saz5og4U9HvbBXSpeNA==","shasum":"55a979b15428294a089212d3491aa8c9022a26e3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.91f63179.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzUkCRA9TVsSAnZWagAA7fUP/RS1/H7TMJk43LrCZUzk\nVQBv18ALBlsGJmNdjqanBZsN/2akL9olfs1ZabvRjJerqPuEeh+znUlcmnEa\nireoPyu5ftqP9HK0v4Yg6rvmRFBBtdvOykwDyvXrsjbScK33pWDNg5ELl/1k\n9cGRnIEYujP2+4AfeqLGnjDTEns1PE+J0/MRO9MiXCH3omESNaOwaoVCrvp5\nyBq9e/UdnwJ8GtTixQjQFwIVIKY7WEAu0dCBOeqmBmzMI/whXEXE8E+Wco1N\nqSS/6MkW+g2iOd0t6iXVlR2JHtb751EcejplvZuxl4PDbxrFp5ew/1F+Q2Ap\n4N9cZiVs/ep3sllBnIRjUg6+meiswFXdFn9OYGoSZTjsHfW+XN3Xa6096OjI\n5zl5WYrL86euK4aVFEnOx6U4wzZV4QB3VU6t8BKrR5dQ5SaezpPkD1R+ojHj\nBZeU6FSeFf62MxWgAILv4Xqcxc2jYSeQeyXsWEE7/Ae4HW5df+1o0Oub4EPo\nuI/WAWbI26bWOozUS5lsMtdxUTHQxnRAKGQWn9RwWKvY+PvWTUGb1ow+Lsic\ndUA8hu9Fp+FlymW1blKQnZxAMVj7LVsa4ZM68GPm6dZFxAAHvQDxVAL3AbFz\neREhMKlC6/JEU2qVvVSPcamMIl6JVPGHQ6vgq1rctefADP3NPVayIB9e/r7u\nZjh3\r\n=LQMh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHR3RmXSvHxnfeCfFJqtxH8qNHwJC9Xfqouib7oXVVC7AiEA8ZPWwQ+qbEaVjP+JGK3x72M62bkAIPf3QoGUznbryQU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.91f63179.0_1589589283804_0.3220699449483311"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.b8aafb56.0","@material/top-app-bar":"=7.0.0-canary.fd8f8f2b7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb4a37dbb03476df8ec3422cb9bff794468ad220","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VcDegkPz7b1puhYWvS6L73BPfcE/RB3SOJpQtQNuj+Izpi3QyTNlL9s1bOWstQRA9VezYLTvOn8qPfHjHD0mRQ==","shasum":"599ce783bed4d57ca2275571c535dd1354f0eca8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.b8aafb56.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtSbCRA9TVsSAnZWagAAIBEP/RlsRlUhFkAboaNQ639c\nA4EAPiM8J4Hpid8wLcmAJmCJnW2NmKkI0M/g+aFySuLAb4VzmQJL+Ax4vyjr\nTM0bYHW3mrPrgAyy0ukDyXiFibf7yAaRwqj+kClKlqTuccHtDLYzmh4qmO6R\nVZsZDEl//BQI7/GU8yATK6WAHtFjZE3vWI2Jec50oEXErsmDR5XsHxrBEuXv\nMoQz/whUYtmwbMWriQlEKMBcj/u76lJcx9E6CaAtjMl4bCevsCptgI9CHCde\n9teF5WU7RGKslNHQ3GMn1CuFhV+leFKwuUHYNltFHqI7H/aJdiKnSBzQRnXt\nq0CEvm9m3pgcZqFC1cWcONBDyB3lsf8xZTAwTbsGPM5BOYIPxHwruMHF1HY4\nzj34JQD+D+MXodn63vwwzlMkJAR+c3G8GImW7iBztIk0xmLjpYbuT2QFRRCo\nuhHeEl91XwCO7EFRIYZRXVnQolHwYmnVrgFWbS1jI2pvEb95aEgtuDo+nuHg\nqTTqLraqITYy3W8slxqkk9atnYKK8uGtB8rycPIXtrmPMaoE17xvbb+0JYXc\nEDnSRoAEjMAsWitciezwrACqxuZLEW45YiDoJ0QBp0wRlASBu9L9qZ++V8m9\nZldtKSjkVz6C0XZc6j32y3VuVLILmFDUyaBvjgCb1BrcdwymW+prWFM46QxH\n+CK0\r\n=/1q4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF4jN1CWkOBub4jk/UC12bltcSoUmRyC4/Ns/q7X/358AiEAgtztjgpxvHwbOznh48BrmaorZCBz5TTxKlERBhSjg2I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.b8aafb56.0_1589826714835_0.6534630335206224"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.a564b194.0","@material/top-app-bar":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"88e988925ffe167fc3916968d88a99b85d5f0319","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tvv540iyIceQDafZVO/4zQB0t8xuvTRTBMeMAfwes6lBJllXjcQFydjL95AhWHyMzPwWhcrBTNg4Juf/iy0KeA==","shasum":"05ad521b70ea4572938292a036e63894350e4a6a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.a564b194.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxRWCRA9TVsSAnZWagAAIscP/R33zPvE5mA4b47cvxVB\nY627dG1NZsrdIvkEV/6scU7GEnW905sIrMcf+Ry5FoIyLIgaYVZT/+dxa1DA\nPG5BradM66k0K3dmG1rzh068Dlp1ld0k0jUqeF2A7pS91cfjemk/y3aGuYuQ\nI/E0jSmkazHJObxJcGW68SCyNsfy6eBbK7+Dnr9BeYr1uza7Fw0w43HaQFC6\nHrpE0H/JbcmSxY1OVwinenCrT2uPf2V9ysWuJ83TX7N5z5tFc54rJ30fhZkf\n1X1t7PsgB2gYRmOMZ7dSvAQNnnZQJc4ZdEqlK7lLtUdNiUTg0vh0GHUahrGX\nnVzzbSTY9jvcuyHWQlMOVD7qwOkg1Xr5GTJc8e/oCzcoiOMZz4EEqZIEUJi8\nYSZGTU94p4uIOsptO5vid0LyqzDmvguCqrILYRtpQwjxw1eIzgitTxYKW+y7\nspm9ZLzxWOuLSf0Ez3ztQ5Uzat7o6vWiuEZzwwhRox5Eg8NSLyLmlMSt4QzO\ngSWWrtZA1t892u6Z88Dupl8eOVpTcburY4Sr2QYHIwBe8yW8G71CYPlhDLeX\nYEgqccKDAdcVWF1hWKkYG4pKT/6IyHdx+LnPv6bbLUKuXDVAA3b6xKjNvZZb\nh1ZgyHqH7rwGGTe1qW+fFnMeEdUMntTCpBfm+a7XYcH40c6UHsrvt/hGwCsW\nS7hO\r\n=raWq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG4a1C1vgwwWd3m2WYibwttTulE6XjZSMa1IzFUgfjSEAiEA1ad6TFNAaXjaDHitiEBQsAyxzj5DxAOvbH8Mmng1BW8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.a564b194.0_1589843030548_0.5439291628850735"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.ef56465b.0","@material/top-app-bar":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebf59585445179b39ed7a77dac598972ce48066b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6We3E31B7dljO45Qw7Y1eUeVElg2Z+cUE4LhqrS5NWQ1zZwXaKQaGt+q2VfaRETRmSYrzey3jl2s+/UBdPZpbA==","shasum":"0a782a72c33e955fb34e7cf075f1436ecd5df20b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.ef56465b.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1b6CRA9TVsSAnZWagAAeC4P/1SOHe19xDT4MoY6INvs\nZe445UoGHl8JKVeIsF3GCnN8SOCPiwLz0BxrCkJDpwoyZlczKPGG+yL8pj6p\nJgIfDcSQvfqExNZEm1GLS4RkgzaXKpNr79N4oAFnPfONgb7w3jg/Zvg+7jHq\nJDBfE4qa1XW/gd+ic+HVWg/h1jgVokJ4XeOvwwUV+wNkY9UrygrKSFhdY6fZ\nFKqtG1sisAdEIyvKeS44pRFMBcUr+TJ5MEgNjkh3IVy33DL2c0XnQ3i3LzqQ\n6ULwEuTXqfYP1muoTyz1eBAhIUbdSZR3Zd9bLtNmT//KPNpV7+6XRwIGflxY\n7F4zPz2sQKueftI0u8pdyEN57ewmxDk1Kg/YtH2KnX06LIB+VhIzpobeOKiT\nkJgLdQ2os+da+TKLClZ8uABvGjB61GIeED7PRjNH+t/aicSSwQZLHkagdi0o\nLRoFoUSRyf55hrpms5YmGCJVtH58RuhSYQWA9sH4n+RaZqWSHeDhVeDx4xkW\nSrtLX0xTWbrNuZvZfqBh17+iTR1CpNwgPl2tv5WuXaOmGBG2nPNcZ8ec3eBD\nucf+Gbus3WFYL0Tyc2KBFC13N9iSJoYFIsZTFx+JX1mU+QhWsz1KfvKeJFuT\nV1XNEWcTHZIsQS7cXNGzIMnUlLNgXh6QQWV9CCQ/aDr9auRiqJ21/H+kPpJJ\nv1eN\r\n=Lhh6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUazSdZwtDaWIGYuU4pYWpIecNHauJZsWvlz8FqyJM3wIhAJNvBszTpkSdQe0N9DjEblJquhtbFfyTAvkEg2yPGfDY"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.ef56465b.0_1589860089985_0.5886792450204368"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.c22dcd71.0","@material/top-app-bar":"=7.0.0-canary.4497b86ed.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6a706d54228a517263b38bfc1185c9ebac4aae41","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-O3VHYdIzfsHkcHPomotQ2wCJiXtvxKLKlefEP3m7TaEP737Pn1o5ZjD6O8JyJ88AtkCiUlijd4sCwlag7DsmfQ==","shasum":"cc26ad6ffe421705a9c79320c6447a450391f5ec","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.c22dcd71.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBZUCRA9TVsSAnZWagAAIT0P/3EK0P1bRZJqMMse5Gn9\nAE7rKxlXh+zVVJd9D5xj/smTJeVSGXMrX2yHJc9GMD4MiXTcX66rZGepGlTD\n2qJ6drgfAH3RsNBIBJ6Z16Kae50bmRBrtnFEuuMzSnRSaq55A2i/QvV8FU1I\nY4PM7MlMAz8hseGllrPANjwPZHRJTSM+125QaLeUJU2b8698B4xqxd6Nbl1b\nLW/h3bkWfgj1Fy4fju118CGnA7JEnk5/ezi9I/5kqjjReCx3o8mvy/jPKSky\nGNQbnBW2BtWynS7YKaAwIObZRr8PiQ9SY7E7gE/1KhiAFmZeFKsyGIf/pZwX\nNezUxARenhPZ8PEHoBcblffGngxocisC2fN8ZxHdH+XfINFe4SbBhx0j+jp5\nHghTac+DThJIU9mUZ+MLpSWASiYVxuRrOwXhNkGjWMEYQBR6Ct15WwWlrxfO\nYVDEhnGn9tDTR3vc6KnO8yGva0cPCksyHUFYIt3SaVpd0NZkjA4VGV/S7h63\nbLEIqGYRGmnbUJrStppMm57doyTY7HPUwbEfs4qPhpw2+JJt8C+Aqbe6wpN7\nZcIOCNMNM7i3iQLfZfLXLzCkvzMZTgB1zYgdQkRZSS29oRRmpj4St9A4eJ78\nahuNRlTLIlp1Eo1MrSglWNw7VI5PmEyheh9p0HVDxMIUqLVrPjVFDGe7kP2G\nlw47\r\n=t543\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBD7VGs7HPaHfB6IhD4XSOFBigjOc9qI0mpA74EF5tsYAiAgpTH7N5qMGJGrQ9CrRst8kS2HAbdGZfWAoCFj3kmz0A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.c22dcd71.0_1589909075619_0.030420790967065292"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.6eb62388.0","@material/top-app-bar":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"abe9e974102de52260c3cc1347abe8592e0d5e7d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-l90yJtLX2ARmGJ653u2ZS2HOCrTs2BEyfWGzWtB5C7WLhUHDr5Rfz+Ko/IXeYkHNedEGPz1ltkSZ8cQ86fVPpQ==","shasum":"a84c572ea2afd49ce478aaa9aedd3404b504975c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.6eb62388.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEPPCRA9TVsSAnZWagAAI68P/0IFj2eYlPh3jid7ahMr\nC8CuInDsitmiSH3gzmyaEboLl0/cygiLDClCTd5/bQZEH+I+qfEOh7WCFbty\nzG0fMEePfITiR8JCXJ8wOj39CKsjjkexQ3ABcyhaS/hs6kVb8gC67X5Ggqmz\nAxygXLBJvOiHbP3W2KuRIPGlgm+gACwRpI0TFnTPCS50sSjhjuBYYptHzecG\nl0Go9czJSrHlOctLclgMSCmkDpha3ipRJfKPsPQtCA01jB9qx5IZkE19ApIj\nYfE44tH2KwuPVpBgATGpe49KT7P7XeTfqVjKY7qrRLiH+4XpyVg6dq7FseeD\nvgscW1Ai/kgXg21faaJg/tb+IwrvkBC5nBYPfpQ6MJ6vNxQGXmOMX3XFb79r\n0Jkjud/FKhxZzoEHgJFb36bThMbo46BKPKsEGULhDGUvSGoukaAyh767VmsR\nbRd9fbqGNTi2ICegFCvY/0jk5U/0ETc9v/Dp44mrRhq6UQTcNlIMsUYObLLV\nnM7DelZCT4WvrPXwP7guUymrZyT2ys0SAUEtHUbxwUIPNiMmbb+LQVxWjkWM\nhV7+5dgmNhGJz3+tdoJ1/TQ1ALU/ADgjTSu9YTrRX5A16sJGaOX4UUP0bbMH\ny9o65GO+JL+ZmaBqSTmtH4omicXmKp59tJ6wOGCFm5pdinU9sVRclZHWJP4k\nR0uS\r\n=zRL0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwEXlc3uQRBtqu89xpQ/osNwlbX/qpmZCei7quknhl3AiEA/8TN0v5Wf6E7jPxLujtReMKRD9rl52GmmHGc9Qt9fdo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.6eb62388.0_1589920719273_0.4347082060723346"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.9bc3230c.0","@material/top-app-bar":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f02ad2a44567ccdf91e52b6e07f5986d49d2b375","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tnUfHjwKdB6/ENvJyPkDKxM+Xms6dQRZD8taACVKDpvQCLUivGTzfQOZbhrWTTvcUHFAYeToS7wn+ncUTsYNbQ==","shasum":"33e0cd88549f48985d78eda3c5f33a56de766e0f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.9bc3230c.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFH8CRA9TVsSAnZWagAAy2IP/AqOyY197Ns1CTJm5lyi\ngzZZNb+/NTGOFRSSGxvnxERc6q9r/1qlc7+nM31cDGpRwpJ8uPRmUXc2abOz\nJ3OL7ZwxLHwiYiLnyXPv2hU4RiOwuy/z5OOZIkQeZY1XMtgQYR7/9Ki8ig0B\nRJSAlJ7HDshyKveHmz3EoSi6xYgYtVX5xyM49J9fNW5bIxeW6jj0LDIlAVtP\nngZmKB0WW/OJ0vuJagmxwQeEMe8KqwFYgy/phuI793kTPR/dA5iE6EM9YnpU\nfrr+3pAAnedy5A11+wW6RVGUaUpbuN6lkM0qtkNkIqVTt0Tuh5R0TkoXSbug\n+LOr+SL3QRPRGfMHomduqOHYcnh8dw3HYw1GnIZZEDBWugeMq2117RxwNGFJ\n/eZGD14Rla5E5z8tRkGqbK0jKoXd040pEN1ksQxGWpx8z5MQ2ut6uT3UoPTJ\nkoN8T97y/k25AdEWtcsf9MjTW1SGwFWvGeGvsdkeEMQ8j4hULuqqTHglfpVo\nldQ59+08Zh686jIO5xFiQtd+u0U+Lnk+PndUfVCsf639Nw+nWJJU/Su9G/iw\nx/uzEwU9bi++AkL6ChHopJL+o2rWJ9sJmCTL6rdYX0PP8ppMLi2rEosK2C44\npZxnf/zam4r+Ig0s1fpopW/Zthts2JEe9KW4OtlqujGlhIOyqY0fRfIKcCuJ\nsfsa\r\n=XUT5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrswZTnN+XuMtvBA6nCaNZrIE9gcbqOjUnobcZRn3ExQIhAKx+nEFARo7x2huTTFblVJaqLmVgiXZBi4B23uwg5cKf"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.9bc3230c.0_1589924348484_0.4747829969919817"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.421a6856.0","@material/top-app-bar":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"caa535baf074d026cb6a6f50dad38341320274de","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rZJau+xe+4lrOBtYNt8Fg3rucpwgwR9JXuSlTCRk0uYgnQxffyLbnRXc0RXU4LTqqgzVSQk01uYuKqOfXaYymg==","shasum":"ca51267d6a0dc9349119714816db755918b025f1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.421a6856.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL8NCRA9TVsSAnZWagAA0PYP/2UefDXB1pCMLm0zW1JX\nkMSBhtRs3oBpcVZExJv4tCLKADNl8ejsgIQMktbb7l/exT727ycRmL7AGA2o\nb/iEBXbAGUrnBacZwBwfpeAM9d+DLP8n598cR8kKZDKU6Wew9UzIEP7+whvW\n0FMK0yYUuNSQhDvkEUrAoK24DEMNZrMnZa9uKqwx68roSMPCAA772+8vk//2\nqq2AZwkFwLsUsr3tkJqwXo1PVvKIT+DR7PK+SUZ6A/fdvdl0LR+ZzDO60N0e\nRQTVTTVBCBpDEUNO3DgeKFGMvKMwR4OMr/d8+1vYyt7c8kS4vL7QzAjTj9xJ\ntksuH4TMOKu0hYIayD88ckVbp4+LGdZc9rljKGYalX6HNOAeprrtzTAiYXAh\nS3OWplJSIrxGxRfAXhg09T6oa1Z7tFi1LhXda1yLbxB26Z3t5d5kEs4b4k3z\nuFv0EIlxa+Ukjwfk7vn6BYen3mqG3/SYAE6lk4vDxxo5xKP/xkoWx//d2veO\n/ep0d24fSt1NHGdA85qwF3o3wZ0dK9QmgThwjTAHtBRx2sUenesJtRmgn+b8\n316hAfAz466aJZqAjRGrdc8aYQqQWpJYw3Aa8/AB0eSu/E2rEl6YifZlOrTF\n3kxqMDY8Bkx+Bh3JI7My/OmBfE4rLdEnnzNsGstTfSrcRcqW+W6pROPq2wsF\n1kW7\r\n=x+LR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDse7aG4DtX841j9MikHPgHVEk/+68jhMVpv498L7i9CAIhANMsdc4iBAcwnW8n6eQI4h9owo7FaSM5WEZ9XPytuJUC"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.421a6856.0_1589952269109_0.8538537117888296"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.761aa6f2.0","@material/top-app-bar":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2888b72f42dfca39ebb17e6fe3df0f964d21febc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-073Zcqb9j2qYbpv+MOIEA8olE0TbDEIW3EIJwGEV0ykK+QJ2w8ghoa2YE8PAx3eB+4kcnpm8vd9AFge4+gv5Bw==","shasum":"397653b0bd6f0098aed6b016729531b22e84374b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.761aa6f2.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaGdCRA9TVsSAnZWagAAgT8QAILRC0Br1BseHSu091V9\nRl/kTqd8JG9E+QlgyI7OhK+jPwu2diOs5juQTHBs/k53ssUyrsvkIWC/wspb\nyYh28NDoWLmySySSt7A3f+sgPhjQzm9lDNQhoN+CyB73JgqvCQ+aZR+BRjh+\nRdHr26SF6UVxMBgAqQigO+Xh2dFm509LCiL69yQbEHN8Y0Njsr8TN7uokv+P\nKaGeRrfIt1x8tV392QxLsxZd6vEmNA52YAZwFqbrVUEjCyztUCC5j6/XgSAj\n6N6xXWCbdxWK2rJAoQi+rIE/rKh1rBc/fWBEHm9vFFeoXBHTGKf6A2Wg/hLH\nxMI3fcAlCad1Uh+qXXUOgGbBZi6kAiX3b/p+XkClFtV97Bxnl8uQapRHJ86B\nTl/bSqPD8Vo0QpJLCFJGbDd5gYwmq5+L7gBwhzJItcbnbhHm+L+ijuIcXkzq\n8YVWZO0S2fcNo0ac2QeDSYygPhsSaHQ15FByRGCoWs5Qq6fCk5m44BLt6FaI\npnzDsmzD/4tbyXfGg/PoKZbeVITeMmS2gwWdXKOs2nvNLEqLmXGn5zEaaQQl\nKP6HFysFzTT5S7RT8AZ97Rv2ngW20bmnG5O9UsGPf1GzKd+zU/Tf3WxJ7BLv\n7PE4K3y/9kIbdbWds35Rh+AOQ/we0pgPMX8ZXmpwTRfatkzXMx0bxBdcKZIT\nM4O6\r\n=yYYa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7Hlr9anJHTIRoYNa3aq8ncPeJd5+hIzLXw+QhYLBUgQIgTc1L5jh45kazDA6zWQ7RbDNo5G17KSpqkflfnCf8siE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.761aa6f2.0_1590010269469_0.20017340777287673"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.f8654c40.0","@material/top-app-bar":"=7.0.0-canary.4ebce8d78.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b845b0ec744d5631e466e04412254ba2fba6ec1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-o52byUsc1L53mIu2vXMMzjPJhDUhkb7kdOFckwX9x25FcVDjMfq4h3kEGZmWLJ5XdrzfYgldY27SnAXEOTeSRQ==","shasum":"2599ffb9b53a5ac4e333e85bf24a3bcf66297783","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.f8654c40.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaPYCRA9TVsSAnZWagAAlLsP/2KOQwnQVgyP0KmeFlCA\nS24Nv8OJmMNr8/fIlnr6PpqZP1vdCNVHPo0KBQHsowVjFOFQBkCKZP3GxerU\nHHMRu6BEg6UFx0Rw5lq/TEuiN2l2GpSCiJn+tURLkfDXaBkwdj1f9pKGQ4Kr\n0cGZGSE77HMF8YpABt97+YMB2XJwTQGc7zdUv97XL85yKD9bNlTrFuxlCO2P\nWxT08b78j8MBcvL91m9Wr39I859+KdoLE3RJqyFJ4DIJ4GXxdEgIfAXJPNx7\nCpqjB/8FzffPuD/ym9lxZFI60lpOItDM5T/cAziEGe0iRQo3K2Y9ewhlfalz\nXAmWUKWVfCVBAjh1YwZt4JGt2imaF+eQzrKQlYAxzZ1JAlIMQDb+jde+1xwt\niLThOINWfe6NI1p1Ef9Tb0ZbROxwMptwfxlO+q84gFHpI7cHXypu6T+yq5lf\nfxYHkSvbx53N1sPVy4mHnRe8hBzkzZCaNHXhJpr4y492aQcLveURWva5iPAK\nGlKefOZeYR9foCTkBcWGW6CRLDixbZE2jjIJJaj33jfWMlh9ai7JBApEhGqs\nmfF8Qa7C81jWQwQSwa5RTQWm1BBdK1/NUN4xqvkl/XTUSR4PRMKyhYOhtY6J\nHyqu9dImnRhOo5j/m25qTcXQbAqVZun3VB81BFJX5ULWNSKPDOI6bOcshYDy\nUKJe\r\n=ivLa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFNAhB/6B1UyS/XnpxH8oWh0Z9N/WUYa4mlfb/8hxJqXAiEAwf85iOXNFX7zX/9WbAKW069Gyt+wJ48MI6CJycqEmZU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.f8654c40.0_1590010840050_0.5806214769017981"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.05f3853e.0","@material/top-app-bar":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1kdYCmpgK7p8e8yNnMGdzZwXtu/qUl8mAceQrfMxoGXsGqma9XVO0kfiTC+QJQgy8H++IfD0xrwDoktAIlgv8g==","shasum":"9a60d732726c5befbe5d5cbec6ed32ad2cd42026","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.05f3853e.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrtsCRA9TVsSAnZWagAAgMkQAIHZ/TGenAsdZNss4AL/\n2+H1vFfTCQ+gE+kgD6qNjHbhNb0qVGBk14Lehb7B1i2NQ/ds6ynTFAaTPIlN\n2FsQHDDSlTXs1l+FeSNn7Nd1OV3trwNYkHfYAa1VDwkcQGJK+0TDU6cjavtB\nns9CaiqDHMNwi67eSa1BzKtvPJUsi5Hbk/m9CMB9iA8r1UxaUJR9rigvjG4h\n95h3gDg3w/peee2g2vn22bRGo9+qGHRv/6ISaLZ3lcUU9G35P3EZRslrBfqL\nQsvbzHLY053ejaauX2Pg2Aoj0Op/AlgYrepio0M4alNzmCbe7GlwIctutLFx\n2uYM2mmG+EKb7YhcfUnbFqXf08Mi1E8r08eNhfMo2ygLzHPpCod2t31wBIgN\nLVOBzKZ5t3hblOI9SSr8eClSA7KnJwNxhW9xkv6rzRPuXMgWQaWPoHNtyQBW\nxcmo+q/ey1Xq5Okd7innm5dU1yA26q2sFS05swTnK7j57ADZntF0xqXuJu8h\nCpXTbCaMRtdB2hGPS2vBNS1Di2fufg6VIIH3XUmd9smr2TTazih4FfU86RDP\nKAJp3nCucmFkX/Q3llGxcuyb7gcRpROGwozE1lslnyIvK/MuElchtfuClyU1\n1IJswd3clBQWSf/+KRz3//2wtQeUDzv+Q4iQq6gBthhMijvMTXb0MUN28TGV\nfjp8\r\n=HehF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICNJgX+IJ5mfSrDTmp3/1TxkkDmJbDiMcgUb3IHDLz5ZAiBTPJzteuLGQa3iEoeIpjv/C0jTVYPnSLnGdBWkIU7oGA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.05f3853e.0_1590082412270_0.8327505847438301"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.5fe61f4e.0","@material/top-app-bar":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b3ddcc96480928cfbc9538fcd5a840b5ba5205f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-sPWd1/63vLFFGodfbLaiOVk2z6dXi0fLHIc2kUPqHl56MHUenyCjBQcaTfEcr2ymMdAkXUJmG2btSBe2LJepnQ==","shasum":"0ba3ca978a016ff8df32f89be25096cc412f1e83","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.5fe61f4e.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwnJCRA9TVsSAnZWagAAZ4cP/3T7FgQ+Ng+9v+ZiZmEz\nBsmShLfIVDc/+QHnOUwSsjKK3hQ0BjHAKMG/r2DjBlHTv8WV8mCzArjr3OoV\nqnHr1EJpHcZ6v1gq63vwQbgcQON7RNOebKhz5NuhtaNU+vNyN9+Vj+8FLkGA\n393sRWk4X0egVuffZl4w6JC9tdfB5i6L+UinXJHpM6Q6mSA4FYKbwYONlk8d\n1QoEOJEDbkCpvbikAOgEJeQa/y/6r3qcy3yeV61JfKFVsmLWwwMWeUopprz7\nJtIQCOy0eDBwUksazis8XoAGVWxY7eQEBATHqWYFA6uZKcy9B9ikCyWlbaRB\nD6+PSuXYrEwqfD7/zBTslg1gtdZofpArHXliN6WiOqybEnCyfN/cJzWXS60y\n5jJkXd1eMLwPRFiq/q/6hnr9tF/QdN4vDJMKMJx313c3ofnXJPXJigUm2U35\nEDVUzSBJEvpAyF6MPUbBP9dM+bvNCb+JdGGNYtqAeei9kfwzPAWddCeWIXAO\nPtXIcpLzMDwdptx+4Uet+A8QaoYjHPLhvQkgrzHC5NPd0X5BApZn5PQyFEVB\nXEI4WNLZKdtOTN3MHNNd5DPVmCkpJuDbuwVUnBzt04SoLO7I4t/H5I05l5/u\nROg8NfQbIRtfKnjneFBQ/y+ZVG+mhQgwTcCeelqu1cjmh24mongkKzdmdFf3\ntq5y\r\n=+vrg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHKiKfQpZx6rfLU1+aC0IiWIuWtrzBihzT1XbtfKb3IgIgDZgIJF++v9TVKzY8aSdlnIXULKbLkwh5MQG+KaqfzDc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.5fe61f4e.0_1590102473086_0.256640058343494"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.17d33745.0","@material/top-app-bar":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97ea4369af06c50f10fd7a5fedf708bbbc380cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-suYOJv7tbhIX+ESKr55GXWzpgHNI2+ZDY6qa7K8G9r1GiTBskYThMDchIduh/qKeYGvjDKhlf9oTOBduVsXYBg==","shasum":"532d245a1310bbf5de069892964348d83aa59294","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.17d33745.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUBQCRA9TVsSAnZWagAA81sP/RLqxSSKlXfZhYri20dP\nyspEPZHT96ibI4oLyxjggtKZ3QCBzg6wj/ie6K2Dllur0Z+Ik1sCPy+0Iz6e\nzmWpIjLRXfAqicysecYmlMv1ynHa9NOtyVbynYiB+hz7Vm9O8Jqs/sBEOupw\nITLiWXTfF7XSuRknVWf2n/EKHIzLwDFcvJbnES5MLSwju7NDmQdfM3iHi+3X\nZr+6tEOEC+PboR9nVgqYZbIuEIieyFaDnuZlbEnsI1fEZt8yr16HuczWQg0r\no9lopXhbYiL9vFeFc31mhQwMXqkgJItTRYdA/3OpkmH+lLbFFlcwvJxZO62O\nb3Liqig1eNK1V6n/gISu37aU5jrizKR0kN+6R/u90l+haff0d5FWs4Z70tv1\nD+FNedOONlxMThBo3PmlW8YxJqujmsohVT0a6eF2OOgzhbzhj/bi9YpcnayP\nzfmvF1SZ3zTqSyh5eSfPGdshBImXUuGajm1sbqEQo3gZiHihBmaIT5VLKrLe\nwuIMQ2ItQDGZkB645ksHu9hzaaBl8E70TFu05cAt3ZmyWBqmjTKQo01zY4/n\n/R9Z7siH5412CSqGjNJqni96UHhEQ+OBYapiD44D2PZy4ZMSGP/RW+GA6nPA\nsUblsyPtyGNwRvYjZq4cPiDUbg0a+65nD8CArFzGRVjeMAx106pXDVuS9OCh\nP5h9\r\n=u5Jp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDV/d8DxK4+Abr45mmAtmUkax+1xnA8udfMPKVVH81w0AiEAxeUrm+fTwnjEpicVuYycIm9tCnuI4lRxDq+Fs1zzIXY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.17d33745.0_1590509648035_0.9663271590888642"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.e8b52f5b.0","@material/top-app-bar":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2877bdfbc0560854bc1aab7aee7ca63f798613ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-aea9u8xZc74UOl2rrRO4D1Bdz20uxYgQjKSnaStz6YD2bDoT05WnGLs7T80R5UPY6kEgkT+FIBAqOx8ArmqDJw==","shasum":"c3b4b2eba978dc330d462c6fe7c312cd13c6eda0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.e8b52f5b.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWM2CRA9TVsSAnZWagAA0lEP/3dFiPImirggbHaxfVdc\nMuiHoX2t426uftryZZn2QCdXKTJicf2x1n0VoJRGDlWy8zraH2qy7hFVuGvv\nQXRLhTNBjyj4NahE8XFolgK66dRMKD8pA52yR6AWBsfJ2MoYYvdNlBc/Ye5B\nvgecDnyWCJRBfWppeNw/KRVbXpWxXOlF6pxVxe8mqDfJyTdU6l9Cjf9pANXM\ncUMKf01gydRgbbA+fDGCJy+q4oSWvzZmuwUQYbaazY3IpFXrwuVpXJaakqMi\nR1N7QAb6No0uTySuhJ6TA5hrt+nlxtq49nyU2O5ONphZ6+x2OJ5/1v0ekKvH\nG5zFVUV9zyg0sUUEtpZdv1rpmyBosG7+COqwIBLfO2WEgJZGOnSfiaxdzpMW\nJfOAW7j3FKRiYxLTgTVXZzjZfK4pKS68klIkiOvNprNlSK53i5ZRfa5LgEVT\nPr2Jy/1Lj+EXmy3sUqkoEflD8PE26GL5RTzi+ldaxAS7E9fqIxXH/trwFSic\ndUal2TzGt5HahaiAwWO/XxJPfLVxvqX64ynzsMk0vrJ885JlKhP1l31uUCg5\nm7ogI3EHkV8OO9jX3e7Fjuc+WKecxjqvvu4cdqUO/g//0T45Dnv2LrFOOH4K\nsRMiJTwQ475js44RxU8oCrB8ZXPbewB6PqOcrlBjxpMT7CEChCakXBP0E0Vk\nxyPu\r\n=fUKM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRCu2dzEYSSB30q8f0z3tImA881VCirw/omO4p1npAvAIhAPmd/2N7pYL3+3OFZqjzy/c0/waa1mVeusPu7qREbEEU"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.e8b52f5b.0_1590518582474_0.7056390238782697"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.09afa0a9.0","@material/top-app-bar":"=7.0.0-canary.01de07011.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"924f688ba033093a21706afcd1d5b3dea4527355","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OFYS9dZ7alGqCMvHjiYSXj7S1kJtlWtOay/FGHXXft3BDBDqZQak5pjKYqZ/On3YxMZagyy0dbdEQ/M95g653g==","shasum":"fe13da8cebc68817741c4d5dae27fc58f179569d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.09afa0a9.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY22CRA9TVsSAnZWagAAYw8QAIiPZF15sszUJQZbLVSu\nGbjdW+p8cTjlErXJEZ204Pc1wZj5k6zOXtgct8G+3YTG6uNJjjvIFyLvKm7T\nzdU0Whk9YpnigOXX93ni9vjUZN9z7Ebs3+9cZ/wCQkqHCmPS9jnowt7TpMNF\nj/jV//aT+l15xhkuZ1p7fjOZrKl07pQ7cL1fIx9KX+QR82VcM3pBj9CW0XcQ\nerKc0xJT/eWVFMPdhJ4Vhl6fy7YU5Iu4M3BqZVrHigd11Jlbf2k2HU7mlNXa\nEeWnXEdAHPwVwSa33YFTIg+6W5+efusT9aQRwonZu+SpX1Y12BGF4GqI72Rw\n+FsgPua1Qyz+kKyacKAXUTiiZdTjnx6OUefSRfkWi0R3T2SHVROV5x4usni4\nvOPnfVdmzxNTZh/0Hm+KAoqTtQzhKjVfAn9i7fhqJ9Kl7fORkXPtNrtCO08W\nFFED22Pz5qaD1fdG1AGrRx11tNl+pZPqgscAgBeJsoUxKEmK83RDfq2OGzbr\nc5uXCb35bpExjZCMtCH85Qmp4K9AwjWbdM0FVz/0O8wBm4X2m8pJM9TP2PlZ\nHX9Sol39lGOnTRJ1LHSmWAIIxTSj3EUcCKFwngyxUkMOcyFB/QlISfS/rdYj\nNVlpuUJUg1hTU3YRHFWUTZSCtGR8Bpm8nXO8RLnqhAubeYDtRr/duMwL16li\n5yWS\r\n=l2hR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQDGpBITsJCe8wYVTENeSR7xULkSvm9Gn5zbW64t9YmAiBthawr+aPgO2e5ovF23FXOyZxjvZQFnVgR/hvaECfeLw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.09afa0a9.0_1590529462071_0.43165685389321484"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.58bc9166.0","@material/top-app-bar":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"71845a1e43b7378230bcb8e8fec40f195da11c2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-FYvPBKdhf1NkngHrraRFoxbIV4Bdy+s10/HwYKO5XzdKwJ0e3mIIrLrSo6MIWcdIyE5nCAFbevpQcvziFDVWSQ==","shasum":"2f4ff5f612aea6353f85e72f7eabac2505596b62","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.58bc9166.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbSpCRA9TVsSAnZWagAAJukQAJufwQSSoknLlqrzEITM\n2DFMLETLBDSQ915HBJB+iayreeDWAkuFAptLpBQ21TI4u+Dg/8MFH2+Rg+Mk\nGmBTIypHI4MM/AFQevDAkcwkuWRtVwlu84sSR2HzGmLYVZK4/CW+A33XBZAq\nIzIMjzxEGAR1m9cr5DLyxWQTyWqSydA18MOggLo1nLKyVhYQatRjyhrrkiqe\n+aEzfFdzoIxzBJzwoIyg2zp+5ix6Ax7HhP9DWvZNafnfZsmHF2qYgiSnOi9D\na4mZ3NqVRGjw0RbqXK8NC3LaHiA8BoZ0LzC4gxOxc149VX9ouB0Be9O2dLJx\nK914wL3vX/IeNNoS4a9AAmdHNxfQbN8aEBo7hv6X6az/fab4cHNeGmuRO+Vo\nzISjRDoDNd7yNz6HzMEIcHuywQHYauEjWv63ukEzmVuAvZdJyz4n3F82CpWs\ndfomehqnmzIkMggZp5fMU91/FCmT53DBoPwJqowpKqNPaZIm8Th280EoQrFh\nWKmS39DiYnuzfu2+0FLpCw9/3IvO97w9FErj8GLjLg6RwYIXH5B63Kt+udDT\nctRqaVSZUFbvLvDaDvCL4TQMOxNr+oAKqf0EDLZWsTFC/63ET1OV9D6EZDIQ\n5ddmL9tqSO4diXdl1R6deGjEuo9KIeBJMhNzMR0dgzCnL7W7I9XRxJV13HLP\nUwcY\r\n=tJxG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDepMtf550rS3On7g/xl3w+LwaIgZTPPWQUMBaZKVm49gIhANdx+/sABj9FePtDcPc35iS6xOiXVYTsEHaA0bsTzYj3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.58bc9166.0_1590539433572_0.8732186244103253"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.43bde144.0","@material/top-app-bar":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb504ac1efc09a16041fabd1f3fbe62a49717c77","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-lQJqakw4w7n3RPEhQMZN2JwUbqgfn5TiOsPS1GBAx/nBVPd4WDzuzn/CubDgUc5c/1+cZxfgIDFEOGp3+cbwNQ==","shasum":"ba1e26133c1a7bfae5982411d27f99e27ac7e1ad","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.43bde144.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrGKCRA9TVsSAnZWagAAvNEP/R9sDn6xFRfLoNzcqYSC\nbvUtthC4P67V4HucXx68Mz/Be943UOwogqrM5dY7jfxs+X2PyrxJnMOupflk\nZXAsUuuLjykgxuG8Zax+JsGeb2EItwYuI+Al3D+iyPUWM6j5rAolnnoXCRkz\nWdBLKzOmXbjRMdaNcXBOmoXrEeGz38fvisFPFF74Dy5LplhthTIRtnF5LKEU\n0GtE2un/3Qd50ctq7jBMvqNk+z96uPHsWeQXc/kS9SpwKF1FOEt6d1MWRC00\nkTsQAd74T4+ZBcMPY7BWATfuZYjuboXNnFINmRE2I44j02X23OkFlLvF3BwK\nT0ZE0Ws69UL/b/I/CCmeDmrr9lGFvODms8Isj1rMbXU7Rrqp9u8VKy9SH+Za\nsgtZ8FWI9gIMLjr7t+2x06s5GO4bQTSyPEZOBdZ27evkJrrKQPNgJS7QdbOz\nUwbL/1eBPBJ6D+cCyaTVsqiNW6ELoaWzArrBaFE+VPRGyN0wul8mx1H6Bbc4\n8etu5+noOx65BLJz5XyM0QlkxihHggt4hBDYDvF9QUBs0uMQlKu4p1B1ZAN6\nTnhy1Bs5RK58cG7qx6Cjvcx2rLmr6zKBq8+OV4jrusvyW5WIz4Q6s2VQWuwJ\nXmxLtNefirKVrdEKT8iHO02FZFDiGyaNwcDCGURQoJvQy1c3r7yjuygJ4klE\nVVoA\r\n=eN7H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHt9WceuuOwrKLewxiySxswZiMmvs5KIKG7fvDiYwPR0AiEAjqyVogbhI7o4hjEy5P0F+pfSn5fBGGxMSz0CXsk3smQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.43bde144.0_1590604169549_0.12719636561744063"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.51067bbc.0","@material/top-app-bar":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5dc99bc495fa061e0960f717c69cf33620115937","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-8wctEhpguvvlybN4zNLa1qPW6sCrFZzMv0VgZy4YRfyfNLHv5U0JzZH2xnHPcagTrOXsoKXKXS7rxz495BPb7Q==","shasum":"b5a949f0c4c701723c24c4f16614cd4486f2f408","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.51067bbc.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsePCRA9TVsSAnZWagAAp4IQAIGyy7n9vJMPH7AQpy0P\nKQLBZwErDXsu71w+3h0IUJxhaazw9obhMN9BJGpb5uNUbJVPkdH6n8dTNZZP\n8QpXCr4oAIDWnziYThpSFKSMJojIMWkfMni0IaF9eZ5ge++is68mxPfvvG2p\nMZiwsJGCJPel/BMiTz85qqzAH9Xtb4Jkep9js3E8zLwaODiEh76CrPFI8OC1\n84vWoy6qOrjGOG2j1KPMjYriT50TwFQe6Uglq6iyXqjm3BtDtU7RNF3VBncR\nNnhNjvn/TEfi8VWlh8WdjZzWERf442n6bqj6w/LGDEodHwuQgPMH0xelLYcH\nb37ZVNMF0wSoqPZtO5B8K/E4Z2CnKHRaRhLQJMnAwpEwwfBJoh4B7YFmpWlG\nHBj60qAqNG0QVxAgdA9QVes0K3CcN0rNMhkKTII7dtV9QKfGIdeo5tWinzSa\nC0ja/1xJqBKaUkmgbpnHxzOH4cf8Hbgldhy6qt+RYPSKa8Mhr1KLviv5rglJ\nWVdKeI5+wVIg6dvJ3m6PsyUDGdM3NmWbRmI4i3vdfRh/HyZ/wgBVPOC7zENZ\niLDZscwuW/j4SqNSbTu825GjznGivmPkXnxcCpv+cjE/0rprFE7+2gcF6CYp\nBEnybRBF47K/hNFrKmHpaEFPRJVJNVUs5fM6khz/Rn5PAu75UUt6MBVww8df\nnv5j\r\n=PMvl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6rNE2+O7ChdY1kkuuOeejGk4DMeiSd41OUuCOEjMUdQIgRXTYAyP37dhjyOJDWBeS0Ve0hs5hbhdRcoQqX16dYRg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.51067bbc.0_1590609806699_0.6997708220415142"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.92751ffa.0","@material/top-app-bar":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"534233b7f60f5860c6a4bd35799b98a3c5d277b1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-SSae9gBHLbREj/+5Cr4R3zInK20VfYkn424qBVs25DAr1eEPCI9AOw4f4OufcEt/FgEke7QjDkJ5L07kQ0u1EQ==","shasum":"86b38200dfe848c26d57c6b5716315ebf2370cea","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.92751ffa.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt1sCRA9TVsSAnZWagAAVucQAIxp4bSoXhem4+PVK4JP\nUGNquTIGTyzuTm9w1y4E8Bk2jKeRrNKXzdTKc6v+mB73SdkeRWw8G/fNxg6m\njvnne/TX2aRRt//KKGWLLCMqY2rdMUJ1QBcn3TK5SwNt1vp1KNrtunqFREev\nDqpueMztP9OSuL1S3fk6wbgOCgaUxVa/0+cqGKssnSSAzfHfcRqeAuXTUA8N\nG51WLufapf8FDDU+gEeukURIApufYvpaZn6TLtZGnragSonJq5V/LIvpIkSl\no4ARhWaH8f6HU4Ooc5A7nzf97Tt95O2P14H16bGFSGCIBjirVYWqHRjx5CzU\noYQ3dZVko6cqKjLBe0i4RCvCSWJMfQ2zfgV6txwd0KsKMniOtTWEB8G1uR3p\nj2gMsMfZEBcT3PpjN/6VjTFjddNIIk3PC/HBYIDc7UFne/MofUlM26iwQKq7\n/N+LjmaRjsMiSd9s6jYod1pyAEIHUh4290zwPE6164yxmRv5oJCD0QWDnD+k\nwknPZVS9c1Uzj9CXrEVXqgafzqe8kRIlwh4wpQN6TWj0ujeUhe6xFzpcDX8m\ns3pFAHftW5W8bvFia+3sn0xedlzI5h4rKaL3tISqai0o9NN7uGVeFZaYzkly\nL250RdP0FrfQxZixw3rQmm9x2nFgucz4tHBB5+OrwCRGwhKSYF7dB041Noqd\n6Bbc\r\n=p78u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH2+pntkDX114u5JcGp4bCkNW5eayofuGwLWEt2FxenLAiEA1ayZOAmENCZMQsraW29G0KMIW5BXaF0Hqop51pknH6A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.92751ffa.0_1590615403786_0.4023333263735487"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.aa2b40bb.0","@material/top-app-bar":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da9556d449ea1f3ddfce5e0978fba83f759a1e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-x3dNAwayMggEIZRnoBRGzeBoQ3ENtP9pCAMszzN1D11yLFifEQejQYB64Rm/jwyk9HI6xmEXz97xhWpUShTm+g==","shasum":"6cb719fd5803bce94d3de2420fd565b3efe817ac","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.aa2b40bb.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A3DCRA9TVsSAnZWagAAWUUP/2nyNgye/FRu6jIlc0OE\n3nGhx7o2Oe2YchsLYRE7rXAWSR/c6mR+AtPyhgfG1Bap4Rc/hoL22FPCXG0J\nlMGmLriixwBiXN1s5maRMWV4pIJudNnrJ2BTeyFdLVaa2TWVY4z8UsX99xP5\n+g2/Fp84yvgoGTHM9v+yum8szjKaoYqrCKGpsa4yIUB/XgFiDQag9N8qni1z\nw+MPdcxKszsRCCS4ZNfQ7RboBCbkl81SWCODQ40vDgugZw/O4c3UWm9boWtH\nkHfysb/3jmtRMEraHmEEhsVvst1KpQBnqnT79JIasOHkpO7vU4DQs0QIBOtj\nfSUnTDJlgih9HXVXCcY5xTFZBv7Ou1Sd88cI8SdZKpgQqMtVIWohRItH+cyH\n5dA8ZCs8CQHyaYmkK2j036BqjxsA9VoKRJa3FTmfnwVFzW8jBCNSaIxlWVOs\nLX0s/HtUPQSEjUpxMX8N0vzBKTsubx6duXVXepqF6BIOjzLn9W8tqIfZr5Lo\n+jfq36TB3zepyq+rpubnZVcf2YlZSbZNhj/w+mGSV5aRZZqeHkQA/xsTvHCb\nVTdxhSqynXvlnLpUMWVcX2ofe4uQHFxFz5zgLLxSZEpHNigDuCGr9lqDvrwt\ntBF7COXpNC3QFqGal2+MfaW/kKLUqnUxpt1z/P1z/LEu3/+Kb4pbcgmnB7MY\nyM9/\r\n=lfXW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA5deN6VBmRTb139jhJ4mB66Tfz1AZaoLnICTV8OnXDJAiA2SNj/eB33YRs2Uv9Wa1w6lT/Y1cZH0yaZqujilD+wuQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.aa2b40bb.0_1590693314637_0.22841014118103242"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.1a870a01.0","@material/top-app-bar":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f9a61196d2e2f42c5bfffe7dbe30411a16b908a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-IpcZu7Qkl0KsVOKF6km6/vQ2bj32BabZ/COyaEYRtnkiomiS9hDnp6OFUrMa6QM9Ma3YLMDjLFI/21nXzJwdQg==","shasum":"c8404381d622b8caf94605b6c761b4dc92df246c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.1a870a01.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Cq8CRA9TVsSAnZWagAAWBUP/A7K4zag77BGkuYZOx0A\nJFmtqJM90rXrlRhETu0dGsr8Ih4yQAn8jyt7tAu7ET1Pc1z0Q346slbys8Fs\n7ahQWf4d6bIGHPq8u0d2d86TY5I5L0e/rCx7s8SNnC6L7qna2oUn11oQ8YlO\ntjky7YCjG/iMUpV9U8vJUmPSwY/XOCLsoDzTPjzD42vKQdoaqFnRtf6ojLcL\n2QoHxgjJUutYU9mCS61/604ZDvFTXXZkWJwBXF3bFCgqWSKeUchHjTjVuMfD\nzDgxa7y84J1XkHboTFx2AbpfM4DTh+ZFC4PKM4OI6uclQDpfG/RG83l0LyI3\n4iFH6SEaXIwE+ZNALOrhsWxq6PzIGQIWaGU5W5zX+nN/d/dtBqA3lsjIpxcR\n5b5s3NaEUmqmwlITGmwFIoYLSslQ7wF0E3z8VtTA9QroTAT5IzolQ3FSQlzd\n8M7e6jGJUr9icAtj4/Z8oP7Hbp2H0AgaLPckIHNHj6EZaNLZe/aRKTVrHg3Y\nORpS55+ZClJJaY458i2qtqUmqhA9ul/l75bQNFZkCD9+yxzZIAil7Ja8PlwW\nAK0Pyr45NbgNFg2Z3es08XXEW+KVyOWxR/yphX3eMDSlZc/0eiRcF8YreydZ\nMuraKTydJl/wkM548W3m1328RHA5V1oTN6CfVDzlPBY+aq7w0DgzyeIPTfUi\nToZ9\r\n=JG5P\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZb3Q16KSAnOuPfZHFmgxkGfzXlLqAeSm/KTWs045zegIgDZysDe6L3OKlYd9enGLSqQdTGFAduMDOMVWPhMiB+Gs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.1a870a01.0_1590700732118_0.23068227764385218"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.ad57d086.0","@material/top-app-bar":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"718a29a398b0baad30119bd852a5e1bf4d8e8e3c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-JwHWQA3OUyysDpAshQCbUykcs+Drxeo8fq/zJO22sV8sIV/unq8ljJX++NVspL2CZ1AkhrFLiKZt6mxhGig7FQ==","shasum":"d9b9391c58d70fd7bb437bfdf347c63559c9fa07","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.ad57d086.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z+FCRA9TVsSAnZWagAAAu4P/itpqmatrrzl/OGQXOqB\n0WjKAKQYUy76uG7b3qfI1DYca+GF9phl5w1p8HfF2cvG6Gz8slFv3yxXkSf9\nKCpKdl9C1KwybxTy6rpC2hsAS6Nf2C72sUiq9VMY2OFuEKnsghBcpJ9fieRh\nEf62/Ug26c/0qDB0FCxD5Zw+pL2T4VdKS/K6lf3FgwoXCeEmeJKqNL5teQFu\nGhMHlLXfYW5XVdZ0OiiO7ImKF9YTCQ+fCgXOkPe856mjYSIcAeiefcWxMRkZ\nb3GI8RS3zpb8Tm9vm6Y7KxVn8EzanVxcAFemDMliXtkqROUij+OkIoLutTf7\nhA3ZTIX9YtFkJEDkStNhhdb+XoAafE6c81/Jn/AjH70ABvR+QLZj+clzVVXC\nWdPgI5lMm4WWssYf+gZVOToRJCKTaLHHlDaHJ+ZD5qVmzRypxrFu4kSJFt1w\nRf605GfL98tiuAL9xTtCQR12jTeCIowd0yG4Q6BztrUJe92z3oqpsL8O67bx\n9jCmApJ4QjQWngCVDbN5KFdHXgPTBl70GF02GpTI9NyRsOxl8zD9qudU1VBv\naWvdhsBPSAfG+ExGcSZiMCCC19GNmcKAy+zcwZwdCXE1SNgrT0HTyNFPVYvB\nyv8w/qXgx39XF8OZPGh8+mO5nmwREFjkBXyu9bi1h7A5KkLLHgI/ryyjo2mf\n4ouq\r\n=utry\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClpuuBrqGYUI55N1yeHyeSEAhXYoZGoz75MF5p1bgfkgIgaR4TNQfDNFoF+F1SmMe2iSdFrIFj0HjTrqVUopDBdpg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.ad57d086.0_1590796165113_0.9836243969992771"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.3bf2b4d5.0","@material/top-app-bar":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"796a0757a7808c623433691d3c52ef63cda47751","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bvE8lZfUIz9b+T+3NFx9VJStMaQbwjxCkCB1FT3bhJvWCOwW35mBlcCEvY8Oes54+Vj8jHDNafFhrV2HYogcLw==","shasum":"ed22cabdc397899b84e9647792a8a9ec15cee30e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0aqoCRA9TVsSAnZWagAAlYkP/3hLq4scoXtKW0QyS2cB\nnk3s0yGp8u5co8xWGvZOf0Ov1RrgcVrjIvnUtULGknmwkGg4nk2caiXOrALW\nK9vky1CFWjRyPVpb17D0kyuTFLG9ld7LumH+ICO9Q7lx6L7PU8sw322SrWtY\nao3wjUkPyYRkgi9GZN2B/KkNOOIKnZZ3ewkL7aGOv1eFc4+8B8J6tDqcKVve\n/6gWolN5MYaWPIiWoTMVwxbpT+oFn3ATU+6AJWpNOPYCpih8H61OlUxAIReU\n0kCeGHXLsB4eeodsxdOrbNrV8Nng9DLEuznr559YqBTPJT1UXC/AwslKrtgR\nq34aOcmS/EN4EfTBmYMHLk2oelva2CboxT++HoG4yd0ppW5Oi1E74Lbqv8Un\nweV8fqlmfpph8auXi8ljgsEDIxCc2lKm2w9O9RN4Fvxw576HZdzxPxU+rfSS\nHz0oq49ujboXtYejyvmEFsEb1mMzyWpfYzzPzZOOQB3HN9taUKXUx1Ko0hPS\nqIDSv6hOKr1S0Y2I0ZER2atJ4W+ajoM+54gRR5P8wwo3hI13jCL1McKhIoYL\nQGY23P7gXEY9pPK2twpYmP8/tKQ78koq7CEuxtkfQ7TDshyg9Yr1TgNyMKBg\n8KcdSlGo9iUnDB9JKkc1h62tz6Q7EKTieQ5IKc0wUsUTuWS+CqZFU/77e0so\n66N3\r\n=kBWw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtM4ZgWl3WYVedH4+4Ccccv5Pnxnu109Tth7guFRxm2gIhAMWNXOO2pUehI5jqQ8nYLz6TXRyQU3xQbxYZ6KcQXGYq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.3bf2b4d5.0_1590799016464_0.785125097929767"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.ac05f090.0","@material/top-app-bar":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dcf12105ac71a486ee350d7b7fafeee2e7fbba2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BHdRRpilK3VqNw+u2ox7kCzWP8H4Yw3fUpe8fRg6D6t/HSESPUleytUj+zFEe+yFsYg8n6auIk44xft3w/aOrw==","shasum":"79c7006ba2ddb48194f2ca7795d5cacbdd23ec9d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.ac05f090.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cnaCRA9TVsSAnZWagAA78kQAIIrOvXft7yP3ZrRotPm\npujH5W9NA0dhPNjtakhls6OL8O2/GgLZivV763IBimh0/oNxiDSVjqwDbP/s\nI4ETgY/Z4gTcX+h7+8qTe/JHYFrfBTOgqaAALx73rthMpyje6Di4ydRUer3f\nE/0twk2B6G688gBcET0WN9X0/+fDez2hVo9EqU1blOmeWi0u/RQwMnKaQQMD\nX2hnu/HgBAf68F/CPRSUj//JC9LCdd1RaVC8dbG6LvdoFt8XEd59GKt6LPWk\ns0CoZaJExnXHlJN/AOGFxmLm9pxNXN5KJ5arwZz5Gsyb0xOW7TR0OgrdNZqX\nt54JiwbLzFFZADi/Z6LXKppwAAOQIs5Q9hldAJvVunqhLCq0065yQqbVVBnK\nXWDoCGqL7BMDAB+v+y0X73r6LkookYt7I/AbXE4iyJcy9bdc/uJ+ZXSwfVJk\nkjUH6HgcV6BHATmAxxsowOucgYrq8PJSwhxwWvHzVoAwAEJK/RnZlY/+Md2Q\no/+VshwRTk72qmaHyQGCsoBLN8MgEikcJFBjxP8QOGllHRzxXyye2/gGszjI\nj50UQzJXmaQyjIHiYc0TDgyRaeR9HGxiLDHtBBVQyTiWlb0uNQ5BBcXtmBD0\ngEcBoTW6w5rAYXbGL+OaqLsUYUnH+nADyq63zdKNN2npcj5ATnbsoFrHmXbp\n3iCG\r\n=8Z2n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGFXlH9OIUnYDHKAJD/9Acu0bZVKuZoS9uP8exj0BLSqAiEAiI3lcTh77qPIIcCRxrEDGHqS7TE3lewGOBgV464ZH4A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.ac05f090.0_1590807002066_0.9877074837156452"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.0ba7b095.0","@material/top-app-bar":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ea87617c8c9beaed33b593554f344296ff2b1702","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Apst4MlGwfaIrSxc6t6c5aqilgPdp2+4PMGyZOU+Xf2mUn239WjROkXZj+ng1BDLmRxJne9HZYqIny+CVkHMcA==","shasum":"83e02edf80b51f1558a2f1a11299d6c49804e4d3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.0ba7b095.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ctsCRA9TVsSAnZWagAAvqEP/0MAqz37FC+1c6L/Lcyl\n/qq7v0P2MBkwrTOsZ0FHZ2AA3PPltNpUWmb/eFTStCtuxRvT6Rsn0s9K/c6e\ntzYeeA+RgWcqiMnpFxUwxiefbF35kJRxYsydrO/xWNE3Q1ksO3rVrXsCPq3k\n9aJADYC4GaoL5zEOpvczh/+4s4z437dveedQRdx74B7frBYJXm2xBaR3eUq+\nZetsht/maaQ58Bav+9rji41EQCHuDoTi1ouMay2qro7lskBDihwayN/Klczl\n0jJSnATwVDdKMbRLBastM0jVTurwPoIBcnqirJcvFbzV6+GYysWIOSuk3Sgf\ntVtfSyCu0zussbRmDV3kVBAqVbvpGfdhq7UJV8laZHNf4963W4gcF5Pu0B6b\npylDZwo9qJnF/opp7mKOSWDiCjuV04xiyM444DZyqpYogJeX5eEAxfDp9Rdj\nChkZnGmOulgqlEsBImAmvGTKUZ31END4ihphwB5NH269BHDQQJ2r1yd0Rq2x\nG4P7F/IqtGPiYshmhxK48d9mEpLOKJQenbvRxb4O72987Nd6Po1yjq2jrm2/\n9iYhoBPfrO48bHkQaBg6jy1E+BAB6xe35BWROucWIp/GI+y/1y2NpjXm+3iG\nmbHUTUJgU3HiQ4E2ISKcWUS7tJy1F0ZomTWo2ZiTgO6UZoQOcF1g7IZh91lc\nvwWv\r\n=ZTAh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgBNkKZ78PZEJiANdsqFqsGaIv+2IEcUOLRc+3XezI7gIgMztdrKSkv58a8SB05Ftoepww46QDr89iRu/vZ7LpC3A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.0ba7b095.0_1590807403947_0.7734262840683193"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.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/mwc-top-app-bar":"0.16.0-canary.5eaa9bac.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"971c5d20ea684615fa18f3c991d77704a2435384","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ru+p1jzPmqSh4oMQ+ak4qxbboji7zA+13tQ/nhaukk4xEAXpE1Z5V70mVm4WVQFtocPsiepGSMrugl41wHL56g==","shasum":"dbcdf8194a07591175693f8b9847ca825487f34a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.5eaa9bac.0.tgz","fileCount":11,"unpackedSize":29517,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y9ACRA9TVsSAnZWagAAw4gP/2NnDyfJ7hyvd/geDQK4\nRFr2QM09LJU/3zgz5wunJ2Y6M92R+nTSUNV3YlunNdbePb++LOORBCgeuiFI\n7b81fNZ+vVw4Wh4szK6c6LQkeJdnVBXoS4m91Zld7vtWhyl19Vz+8B9FyqO6\nTI4au6omrNgOA8/CmIOBuidHFzJHz4KoNeujfYnoZbaTuzFJqWRCA8JOjeTp\nLMHVvTz5QlRPImIaru/4wzvsNdSHsFoLFKhlZcCv3VJ5B3VFIQuC/BpuBXyB\na8kocC2nezSXX68UQ4ZXVEn7cC38rQY/zwSq56yWuOATHbeSqdx0dzC/11Mr\nDbQWzkF8TCOXciHU1Qi17Iw/j3Ss3CO89lu4NI2KVW7NO75C0hLitMGiiFnZ\nEV9asA3tD2EhaFBbQttAekYE2mJd1PP0RyJGdT82DFPgVZRRYG99kMDgvQN/\n8wtwY2QRqh7eHUNWtCo+wEyREesbf2+vx5FTV1Ww3IFXuvAwHqd3OKuoQFlG\n1C+Ayow990D+/BiUQJd9yklXcPw2k/chrI5qiX7YA4uXD1IvTU+xoXeISd9s\n24iPizHrXTIZdUDGSOfK6tORwDcaFF/4PFNtIGZkTNXb1OnINJeIya3De2Yn\n0p6WulNlnvuFiDu3F2bccGymY32Oc/ke+XvgM54FOKxh/80W5MzeSD1dVnMT\n/1oA\r\n=WRE5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzB2EoMSt8SroUUgxun0xRdffRQiWODX1bV/dGJI7sqAIhAMcf+cpFTzUR7nnhAfQAyqHbhOQ0clpXD3po8A1npTJg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.5eaa9bac.0_1591054144197_0.6845741621022945"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.5677ac20.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-00ftsY7/4cKKZlMAUMtZzHcabRNeuQVE2U68E/rmuGO8JLCFd8C158mXTU+SQ2cH+U/k/zYc2Fixx+cqKezW1g==","shasum":"2dda729cf5e9c4cf35014472428694faeb51bdab","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.5677ac20.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZXtCRA9TVsSAnZWagAA610P/3cJDW02yFnShYrCmUf0\nE7SsZvdwAhc4bY6QLitcMkxl5GVRFUX5ocuTaJtdrfYL3PowdNU8r9LtoTNb\ncZlSJGqK5aC4Bt29BJX1p2fo9+jXzMLOddOXgKw0Kp99JuxV+gNk6Grc6Qxw\nFzsveGv94+7AtXFQcXyTg6drYdo3S8ey4omrekYw5Q+5nIAwboLDGV4B5Db/\nLVaimttwtQnZGZSluEwbQFtfVKQyYd0XkJE/OkiiasTSFz9PfmQyYsMwXYt1\nq+ySG/f18Kbdbth7U9QrmSEXU4whTi/n2rOxeaWtbbcXZtRvYV/sgzcLuA+H\ne/nM85M8z1lSKpdbw1afIzX+cLzIrk+HuaZuhTxdmL9DKUPuPD/9hC8WL8lM\noHbd20Hc5ansaSabSYW61sORFox/b0cTJQPyZJnJc6qwMjcx0o1JidSeXyA3\n5q3vAEAaHZPZd783VYcyLMhVVykuCyIPo6hHnayQyvAzlcOdzQ74Z9fURk1d\nSqsKlV6x5HqBbcWqqKpv9VY4/eM0fEFp5U4oLa0JWdXbZqEExMYKJrYuVcsB\nFhn/CCtAdyyjOiZIs3M9N+8htR5lquHfpqTaZiWLVLD7wcz6PZeU40MOAoti\nOXgAaZvDXaKFRl9wG0QZrtJKulQ6/w6gwqxPqQu5T+TfjFgP5Bcs9agCbUrK\n/Glo\r\n=drif\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKy1HXmvErMy80MgVvcfPAvVLtvytLpSWOAnZ0+/rWywIhANQSxk3G8gThLlZCwcVFgUfXq2YXqodWi1hhl+qEbyZ6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.5677ac20.0_1591055852789_0.31691960904909466"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.7ac6bff4.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-yY/NRpc3xj55gomD+FGrbC0KRyxz4VqRUTnakvAtKwcSbamnA/PECsz59kOHz7pG9Q95cmUgA/zD+hoxT8rlKA==","shasum":"628fcab499874db11bfde2b79f153d20d8057981","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.7ac6bff4.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Zo6CRA9TVsSAnZWagAA8zgP/0HlXYWqtLclw7Qcpuse\nHNknNh0Kmn2LQt+yWO5Z+ia+2TbBSRgZ1XPW20YOrA0U0neHbVa8PujO/ZLy\nr6fonoYDhPhoIGuz+QlGSgZ1I1C4NFkdKk4X9YJ08CdgwWsYn8e7OWW77j+T\nwj+6E7oZyfvtRCx/w4R/HMCAmlPGrNH4g0xi2pEna/I+y03syIkT6yhHo0CY\neJsVrDbnMLX10KjJSywsmTl5B1OJmopg96IJjJlq9dZxNjsXMnmMSWDzdQEg\nZjayfkibzi/Reyo1WkQughhncNwtasotJ4YEknsS782dbJkX6ebCpKBSCchT\nuIwztQcndbXS0hTEbgQVtn9ZwR+TIGKjLLXwApl4o1iOw1Px9kJgvuwWrJam\n9ddeZ/0oIjAyamTVs9DNF4TOOchihuCMxXZY2sQeVaurdT2z+8jkNVaONJVD\nmPhT+06jqaEMRPs3PHpBcv8Vi0i3WuZ1q/4Mr6wAekafZLL9RnxZal2Vk0ZE\nkTt9yE8fSLcsvtzM5L9Bi9BujLOyvv1qWyXtegSZ1m+1UPeC+ahnDE/IVku5\nD6yPXQYUhLldji8oOGZ3nAH6C6PJHTt9NqguH7RrJuV+IHWwJ8nnpMM8zeWj\nclwhOGaHdUly/0ZOvKbyJgMJ5whBUmDOXlE4C6tQDeRL2sCpL2l6pDHLFujy\nd6mA\r\n=EaBA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDmU3uqEQnKBmfVe4G3rT8JDQ2xmgNO9XP6Zmv0a7TWWAiAUuhxkgBXjXLpTwEko4yZfuQilHJyQ0QBhOB97LgTXiA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.7ac6bff4.0_1591056954233_0.5713542343755063"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.d45622aa.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-IS338zqiBrt3SQ4LYm8RMtSTYyp42oMimVjick6krmz4dhNMFurgWVWYjXN/KWsfRJ0syelCQtfDBGDLaa/idQ==","shasum":"9fca94452553bdc51184142cc52adf30f04fa9bb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.d45622aa.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uS9CRA9TVsSAnZWagAAwVMQAIUPEau9s9Q8k9vFCv8S\n5Rzsap9kYI0xZr3FCkiDpKu3oc/t0YjMHmn1BD4dYDO0KTk86H5ZCejTfDKE\n93+f60F8Ln9bWKW5l+NspLC1mI6WHDg8SrfeZ7uDdhAUDBFew99NwJnk0bWu\nQStj5mhja8WWn3DsDIQuYnMGHJm8Ojj5/SWWOQsKpilKaTULkGyXLN790PM5\naiiBBbYaYka9FdwcAt+gpus3D+Sas8/0zX3QsDlPwt7zPf2udKUU8/7ee0D/\nCSikUlQsMlujbnvSa1TSwVc7l/EEUXLv6W8bgSHNP5deMM4YuBT0SdCFFdKq\nq8THQHyTwpo5GvRxekUs3rm7Ek7AixT3Dzec/xXyO6hzqnVH5ni6sT17nx7N\n6xNROj0lU/ObDdt3TtP1V05EV5GiPy5D1lXZfNhwNe6yX4yk0ELFWAbKtztL\nTjLeHrcMMW3iOxIrZx1bJ86QaBdcoL3Uj6pqU4j/Do3xP5cxY4xGzPZUpl8j\nWkK6vIw6OdEh5+u6OiDuw3TlZie8tsF/CkaPimOULdZhu7WY4dgiqQ+kGoJp\nXeMzsoFHC5blJcCccTxPQbpWLJWVedFMNih0lOK2EftXhI2EL0AEqXinhQeS\n2WiPo7Cjnsrl0zJnkUFajC8hPsJPbprM1bjCMfpZy4v0E5oaBYyLQT9J2qqp\nbQOV\r\n=TY1I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXWKOQoj8V3AAPSZjtx8jP0Heg2elhxEeKY7Kg7dOsXgIhAMuS/PG8HWFB/LFzOg5+m/QQ9Nsal2nLefqwCWvJg1gt"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.d45622aa.0_1591141565062_0.5654058903209316"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.dc26c709.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-oZrDw2KQKLRHpmweC75RDge3PHA5EQCLJEk+RFpluHc07OiCNNehDpmYzNjcKZ2U1PJOp+AQQSBsCJTdHZqiKQ==","shasum":"b017a22694a73f29ad45cb069b80969dc7b13749","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.dc26c709.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qk7CRA9TVsSAnZWagAAZA8QAKMCNjChY2yMyKI1XDJL\nMnUExOjk82QYg15q5wJXfTabYIiFXZPY3ETR/BsfXjMWP9O6xDN4XzOkWihf\nPZ1ty4CJG9E3VoJQYHQfz0d4ePmfdJS1rktuJs59zznpwKWDbDuE2RV3px4/\nf/LQsJiesIKOqF8ZOvEXXO2PCvCW0HUVov8MHv3ptIglijfJLbdCEJ8r2CIo\neJ+1CrxyGupCOjZneeyLZO518Xo990aUg+XJmlUr9ehlVOzdMDDDapUnmNGl\noqZ2kGqq8BXGnoQ5DHlyAsVd/y5i5O93wY8qWMJcFOAD405ep0WLxm7rORDC\nkdG1Uj+W3nMpDEsg3oL1nYMOFjZI5AtOnMwz7OHWuHBwvdKlgVAySgaeL05i\nDhMrhApmncyGGAavprJvRh/W1wYQ6vmWOROC6Y19I5PAigDH8ATR3nW+QY9s\nkXPTvKF8+eFHK4Uhmy4LaUb7J+O1Bmz1eKb63S27d8GCu/GlNguIZUI0RPK/\nMmDgP65UsEoum/fxrci28EbSsA1k/TZoZysKcF1fRQ2ziaYP7U42Y+Y0p5nK\nmBragBcZl5StEA3LEqRMt9wOP2yDgrwM+i8K833yjSvXzl2QVE7QqhQLZHUG\n9EJ3U6R3JtHWTsKYcHFhfHdsyIyrSL0Xs5PVR/jq1RoLbw820KMWj37jEKzz\nvRbl\r\n=9lAm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8UHontO2htLLE+kf3MMuQh/633g7yPov9EElBUXJjwQIhAOMfD761o5xRyx6+jOXryaXAmZRJjj/jPWQ4a3E00Bj9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.dc26c709.0_1591388474630_0.6617981461737092"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.b9baf6db.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-pe38k/KzFZqP2mTv+ePmPLV3m/zvbOg9khySzWmCPJCZgYZwq5mczYAYRiPvVbfUsC2SJlizUp58tnNF3Bp0JA==","shasum":"1965694d887551e4b26ea0b415322736c728da4f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.b9baf6db.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qmOCRA9TVsSAnZWagAAZ0wP/RaG8qXPABngzj5PV0Tk\nl08kyZN9QyTptZSEGPv9SrVGhCbrdDTYIBdCoG2vL7YJdFakQfcnDBFLF/D1\nFqYuD/sjieria2nSQrzi4pD6tDqc7IP3VI/Yh2cBy7Q9IP4ssotGPzN4HG8f\n9Lc6QArUQ5vN1hc3P5TDLQxPWlaWTTC4oSwjO0fbtWxlaSpurpwDnxi8E/KE\naLWTRDn7R4kPTvEZj/8DoVuP4A99ybKuhn3lXHoAEWw8b13ChfDS08Ha3xST\nUIhRW1nVHBJcQoqxXJY5ZkcLjmGZZAHJpzKdVXGH7NIXLJMX8npTHsiS1S1a\nUNDI6J0MSwQUljfjREBPVppGg4/HhNBvw4zovFU9CY7kZwJ/eOYFbp2RcdHW\nYxzqZ+Ijh+mKxe6L/p2mdpXIyIjVVckP1cZUZ7FHlqCqbWfbZNxOKyIFo+ij\n1X+tXCyRTktY3vvij7qFx55cMchOYI6QlOyHYOgLndLZFS+9EyBcvRTWzg3I\n619wA2Y3PsqXKrH2stCdJK/lZORJeAlS5CIYK8zL/wud9uLjGibDmSv1nQ3H\nSs/0PDAdXKFVckqyLGfgb/4FqhbOVNIJoDcffgkCWiyddyQ/Cag1oyXkMAbj\nKaQmPLskD+pbB3WZj6W6oWiJkdOvy7cXIHRgKKCNxow32xLe2izZAR7py0Z7\nrI9x\r\n=h86K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/iBoD7y0bPlvKaYViYq3xpLaKdnMm/w+LKNDzGfHEqAIgKm5IyNhFv2Bja3jQ1dYSJU/YHH+a4BCXb29MbNx+jCg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.b9baf6db.0_1591388557650_0.8345097574753566"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.e0b8c9d0.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Y/vzilr1bshcCvNAnhC7cRjMC21J34PLxktvJHhy4EVLimHCO05AP4Ag4JoGL7zAo6JtPgS2os1McB7siHdEvw==","shasum":"7e5e0953fe2a097285a227756b6795b112edd97a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s+lCRA9TVsSAnZWagAAuY8P/1SYK9G3TDDqBPrgG1DJ\n0bARGe5AwKDwoqJmP35zZhy8TOGr0C9+Z9orxX+pd9EqYuJ8mTC+w7E3Fxqn\nkVQzdSVZHK86MgHw8LfRd3UAajfMXkKyH3t7RoOJq4V9EiYJtGTKutS3TLJb\nOcqq75LSBDsaQMQ80fFoW4AbqC/JH3jwkQBdP6kKBOBzA3pEqwgltGXLjjbJ\nr6G1yNDDf5CZhcgBY/1DiyQv3dLUfcrLarZ7Gw4Sy8pexWWD4J+2jc9a3HbC\nI9C9nnb3gB5y0SNxyTq8SE6ZbRWtjGsbLXi1LT/2GSoPSv720yJWPWxSYD1Y\nDVYXoSjxR6UF2vV3UXLSw0GAq7Mz7WqCzvYOBjqnzum6P7AEmmJZGk/4appP\neb8OTp9vj1AdIS+Emav/JF6u1lBoZXPHa/Ua3eX+5V04kHuIhx7kM+R1ywnP\nylQtU4QnGftU7zym6dSOh6i4cfz8LPhRm8nb15eicLTXS8J/Ki30QPKDZ2cI\nTYskQQsHljsAEAUDTCMGyuYbPE0Hu1HLA9gMvgXEQwePxqXswyv4tczdui3g\n8kg4h7v76PJcuQF+s8LeIy0uUVvA5Q8LTk82TCWlbAlXfr3CckQCnDayjP00\nyUSO/Q5K+gG5YjRFBUV4wAPDulTKc2uac//ex3ePxMmVsFMgEiocFfyW+yYH\n8i2f\r\n=Wp1H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHDIwoT8rxsJd889FCI9ISl+eZgR2t7ii79Ah9Tl6I5gAiEAxndAzgQjGiQHGPSkorpUxcEQDp1CfUKA1jeA982QckI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.e0b8c9d0.0_1591398308989_0.7651114347954455"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.51552859.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-3CIdD3aA2Gj0G+jvWe9qG24S3cfDFFtKc3cdWWY5vlpTSi9yTd10c90ytCHSjIfqMqrHOqPUW0KLTazJRBsbYQ==","shasum":"99d38883221cbddbbd4b03204bb18cbeb8d10683","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.51552859.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CR3CRA9TVsSAnZWagAAvMIP/R7iAXaw36j0qTNh7+zP\nJ3+RgJ+qrfErEu9l2qKfuCpu/+tJRp5+s3OkO4oElx9LkQbl1m5u7JInZvro\nkAEz+2dh+JPgh1p/qFdqHwEsZA0ql/faFAg2zUIMTATy1QH2zYUtEwfTmECz\nkMGHpdhj7NPRr+Yk4GvK9wo0apqF/lOHbSE9dSIz4f8qgnrxL3HYG37MREMg\n5aVggTicBWO0StHM/Rh8ZF9fAzKR5W0k0sZugktvgC3YfuI3P5bguHZSp9C1\nYccEnV06+twV4X3fuPm6vslUDBorWjpRbh/73xgbASsmguJbEnu3TIRv5aq5\n8JyiUUmcQthopbNt7SQ441iLNuhwgAbEUxcK7tP/W4TMzVj7p0+3FZYgiTQH\nU72xwixqPB1HUKdEepqMq7ZaG0srUdMbO9yhKHA6IDn5K71wUsuPDGdJ35K0\nONNwNth6cn4lS+67LEIhb1KMruQxDMoVfu5PS//4Q/9VJD1WeIlHCDmZ0lvi\n1cHE51daJ+vmfBv1uP+tdynJaYOGfytRWHp+ut9ji48buwexJKRoJs4Mi7sN\n5t3Ocb4EjDzpSGKLdzR2kPRdKi56ESj/DchMtziQpzXtldaf4jlb5omamOMi\nHalWrPrHpe6sz82JNjrnKzQtesgkqZVazzHWJ1lzMkHZcfIohE41CHNsXqeF\nInFf\r\n=BIGg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3azAgzh9uP0162QIyl0qjAn+W5Ku46F+yqsOVbEK99AiEAqJ1M1MD4e43+tFWtnapaEQnpbKEw4SBZZpMW6/7Lm3s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.51552859.0_1591747703494_0.6825527160926907"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.2e269285.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-2FkD3h782rGmAIeNQ/5ZbqbeC6YCN2IaseTAK3hihIq0jRHg3Q7DO1nvePQ4q+/P1jzxNDaB4ICR2jozzl8Y9A==","shasum":"c7b85a37932916818d52f94c7f1ef981d9d3501d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.2e269285.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4Dj8CRA9TVsSAnZWagAAzeMP/jp3Y249mi5N8BzqaV0b\nF23b20oD9vxGC8m9OXDPHTvHd4Sf6v+8PUlBcB/NKfrfXOHenps3zbHjoO4g\n1DO/4Wzave+49cAHl219gwHP0Ad0GcNLDHxMpMJ4KX4qgQbt6FTHkptY9szY\nZMG7owwsN/W7oT+3b44gR2NaZw3KRTVxFAh3LxVa1NdwCXbDKc0ENj+AiaZj\npxDyVKiKN57ECc5j2ZPuDVAQKBQQ7OtuwpGt5hgP/iBxCvZQyLdTZbPlownN\nJwxGFVnOWnTIS3X5YiY+/OrMEwilrQmmU9HgVjtZ6s32JxbbRLsWL/4S34vM\nHHfwtIDwnnv0Nw83n5RGorHHa5pYmTZwGCQphxGTdPcBwHipBQlH1A5v33/C\n8uYI0h3Qy9+VnDkI6LMgfKvrHDBFu9Scvb/JDDe7gtK+0gWsckAb7Eg4I6mD\n9QVK2h85urM73DkpfkpNSHrCJhZ3ffs57OssrR1jNiZtnI8o0uEr6VkxiIbH\nj/dLHlxc4HA/79wuLxmCBLqvpaq7PEshubIurFpjTBae31DL2+j666B3ZuNR\nkupqGOFlNteRykVDFYxNKp/Ivzp5Jn1CFnYuLAMW5Mb5tDiLfvypAky7YZKA\nkydUb0hh2PyjO+A3Bgemhu819TF1lnlk3d+g7wa47foTk7xiG2o+Oy7iJx1D\nO5im\r\n=4nVh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFcJLjdRP2NtOzh1Bsri9u9PwvtLaDQj1lJfFDO+JAJeAiEA38FCSi+EeFBA72zYHXoP8suKqoOC8LYLPhKGBdCB3Ko="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.2e269285.0_1591752956534_0.2388514069759613"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.be138b01.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-rCdCywVcfYHHkGTNRivGANy+q/Kp16kiaw9fy1NZCWZ6k2eNljLdASuUIyg0l+1iSEhoeCZup0LZy3vY4uwIvQ==","shasum":"06fa7f4688abf6dd67202a14a9631cef51c126aa","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.be138b01.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4UdWCRA9TVsSAnZWagAAyEkQAIkwzBYAYbBIvj+0CGYT\nBvX5ZikwElj2oALUQR/pC8OyieL+Q/Kw+3K0MZ8oPSk0k+BTE5/8+LEa+AwM\nrerdAvPWDa24rNDzn8zYIWrpFjI9/xh5P3OyfTz5uVJ+c4VKuHLNGa7dYPiG\nATsSktIEskc29+I5rL9K2dloT+G03GIQxKif/k77h7wtEJ8q8G4Zyl39qnEt\nARHgWafGQtj2nkiquCfA4BFAW3zwMoHzPeLn9P3GaGIUWHJMQ1z0oztI9XSn\ng0onZA1rGtJ8ffLb6b8D85+AGqxYlHeIW2VBb58z4pdmelRHoVQthI1n0GjI\n68MD1y7s/HusO/pidSD/7Nr9KN8/X8pl9qvJba2wRKFwb1ULo8ZZX8fP9SVB\n0pSk0nSWfIkhtRu5i+lp655aJPzAc8UW2Jb6zi5omi38IXo0z2LJEB6ldIU5\nqhiXnL+FvKrfLc5snIPCcyNYxOchcShMtIa4Bl2UROqqE/q3pTXU83bEAkOy\n+QQfrh3t5yPwDTUBI5ACSlWyoA4Tw6Iv226oDxT/4o4S8s81s3oAQPyammNk\nRPUAxYXqvHOpNcbqomWIaZDdgX9p2HQDUdWduCwoetSsVrOb067R9RWHbOvN\n8baucZpiQKqhqNt2pGdeZCXcHpsUyuTze3ByT9urCm5L248skRUXFeH5WYav\nxRUL\r\n=u+Nz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBEGiuEj08uEoPk7fe50vtoXjLL0XtfyzrHn1EC+027/AiAHtOt2k77xSyMsExkV5/gLPClfcugX3JTg+kv3dq6u9g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.be138b01.0_1591822166027_0.8324626927649379"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.04bccf5a.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-GeXe4Icl/2tKviJfLQcOsWctf6jvR/8UePkOjEbwL5bLA00HowYu/oqBpWX1v1D4fKVSLDRqpWQYbyabIvlZwQ==","shasum":"947ed938da817543f43687f37ae02b8abbe3f489","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.04bccf5a.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6BlUCRA9TVsSAnZWagAApfsP/2x9rxCPbwEJsnPhB+PF\nEJ6JrAJQXUOMz4/4f13HklKXoVZ44PwPJGBnh6oDv6OsxpKEmcgRMvJubO7K\nrOPLz8j6xJy7Zc21d7a99QhgO4p3LE9LZGNxBE6U4oBSgvS2jmxxkc0bKyWS\nNvf4OAgcujI5CAY9X0opbt7Flw0/RpkEr6Dcl7J+H8hAH7xaRR4q0SuwD+GV\nrKGm0lAXo8enTQ8ZvxCFh9WZcD2W3neyCuU9vhMZxUQpeUNwazWgFobYQh2W\nsrui5Hvv3I7ZVlBtDG2rH2yrqvG3fD43Rc8lXpWq6GtC0j0wTFnvGcUEHPsY\n8FCNQ2tg3FcvT57RtkMrH7zOA3t0LAMqXKhR/4OzUpT80Sg1mMa0xCBpu7ao\nZ8O9rbR7C9KK1luAneXU4A3nH2x+4whOOz113kqGzi4C8D6qKVEtryeiE+dd\nGZHURtnDQS5Ep0xKgvhPykbR8lU+9U4kaKVmnYcRSFaVMBLkskn1zzhKs+am\n9ibfKvLFlx91Jb2Aq57fCpfuf3EyqrjDhZTFEzz/3suDfQNeurdjizqmk5jo\nCFc1QOZR3vBdFk1hYKNaTqvcFrtp/JvPsQxTWHKRuf66quFIzo3rxKnHagTs\ni3EWM3cMcdsw053/slKNHnlwha9f/3FbAOTOP4E+sxq70ULMaQawqI6IyhYC\nMzRL\r\n=KvJm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCS0fF/sN1MBByoc3TpftG4VwValgQD05tJA9fDO4Sn2wIgPkdYAhb35mydnpsj5opzcRcSqL/9+0Y69LB5sRca154="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.04bccf5a.0_1592269140475_0.27074000944617804"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.b44dea36.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+jdYl+hJGaTRVAkW2B7i9C2dInsJMReXpPFCNtyCFoYfVPKfjnYUhmOe4kfMl2O+972n3/mistsy/O0FF6fiDg==","shasum":"e127a86c01b2f5d9547e4430257257b4de78c7d1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.b44dea36.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TJbCRA9TVsSAnZWagAAU0gP/3DzM7son6MnkX1aVpQ0\nnlppJkFdjCUxkVYTNXu19xxo+un97Rkiv6sffZe7RNA7fr4T7Y/xmNPH83V3\n1J/gmwu4EZkZYH0XUbqSh+LtGkE11O1q18fvRDOeA1P8EkKEewfMk48U8wxr\ncCw8qcobj2hUrCHDGSMwVK8dMyKFQ6QTI7kzHzQxBmmw03y7LHgGFwVUnmy7\nDzd0UFT7jELRGkKPmUuZRsktD9s/RGH/BNf5p9cCmItfm6Tw04p6YuTOnBjP\nh1JX+0ZAYgK+Nhr7rHIAdfldCsGqCC9hYqsWJIC/72RkyrttBnxsHxJbDPzc\n3OwFdKcYTttM/gEr+WTwKAsVVFSs0gBhf6wPRO5a0sWRKzK76vfVJiF0Fc/p\nc0NvKPdQ4uIgSroXH7E2Kz64d3MJJWCCIGGTrNZd8+6S+DNcKIdaOe8nUSpX\nEawFlfhyvNIqg8X4oLeuKDEIfHgkuHyW6zazJ7ByqqXaiLeCbRP1q+EIZBQe\n/o9b5rLT0+keukXXYznWNoBayOLyKXwofcxTkInR7uiFcuuVlc+6OLVhaSU2\nswhzh0IFFi1BV2zNcgwt2INlCZoOcP6mcVV8z4YZdlKQepfpZPNyOxOV7Ai7\n9GFaUYvKNdRL+gHxZoYvvnXsdNemMP9m370DhctI+9YA3CN/N8SaiIVVPpyo\nNn8z\r\n=ojs/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEUykVbi0lpbfMjxFGKI5O1q5IU6rB4Y1kpQd31hZmvgIgLwZ+ZpzMYMVr80VoCH34bcftkycSZYvL2b+9d+7mpjI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.b44dea36.0_1592341083431_0.34695769108254604"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.e2577e87.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-KdvSXtM+uw6SUTXcA5iCTGIwb0D/mpidlAzfNevXFfKY2zIAYPWI0wRREwp2PJyp6RoY3GpebP/fEJ4qEdbT6A==","shasum":"8a4497b9ed7ccbd9c64b4ba9a61423f710873f44","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.e2577e87.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TTkCRA9TVsSAnZWagAAuCwP/Rqr0pfxdNzcy3CZTZYC\nIVUXXUviYeBxxoQeqkCoqpVu5Qf7DpJfsLWnaj+LpNrLo3QzGBDw1Bo4aCyh\nnd/jnLhf4imdebI2J2R9CVJwudHuGdxYF8SpbgjsHW92ojz1QAOdK7PZAXSR\nUw4t/aEui0fyQQv1c6SmUpOMd7B2b8P3Z4GPV6s8iPNyc7zSYZ5WxmrfV/Y+\nKXkpks6y6KgLL8qhCzD49Exv/LlY4C6VaXrgMpQYANQWNOMACNmZWjAqu7tX\n4DUM2kgoamja2qK0jjJTKRmu82IZvegwT40GCj56z6HfmbcwCkcCUYh9vS8j\n+zPBSSrgPVtEmqJtiYqCpnt0mEWoq4yk+Igl6LTIE+UXwcJEmVW2vcuqruZ7\naJZ87gRKRgVIm/HiG6rm7AbzFI//DWZgic6zgiDhwN+8gLn5abFhU2o9d064\n5o/fQZfjzNuBPuhmKIpzo5TmfQyCucdCcKZJsyWpeE74e1TE4K2Cz1a0q46Y\nR0jBu/oTqbguADYla78QwZ92BRI0k3l8arL8wx9wfF6dHxmouxLhCCHr0AbH\nu7VJBRykpTdhWa/gzQpc0HsYaj3DTLiO23XYref/0trA2amCYXPtdE0KQzJo\nFqTwfMfXJDqEvtsTPvnlS2JHwFJpK/ywsIVUJNhf1CmlmajJXjAi87rjdK0M\nu3uN\r\n=0Tig\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUv1MsV/YKjUwJcDQYj7UaoX7bIkZZXGDABpbXGQ1fxAIgDws1qxbG3U39Gh0Nvma3AlWau8w80NpNGywmUI+8PJQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.e2577e87.0_1592341732274_0.9480095237245523"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.58b73343.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-xP4W+e/6nShF4mqye8u5NsaabD6DnSEtld6XEeF22b6QBjSk8d0BjMcG+gtBMhYZZ8GVlbvGOIjz7jNkjZAJqg==","shasum":"9ee625a5c9df73bce521bdf4b9270f41d2539c53","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.58b73343.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6ThqCRA9TVsSAnZWagAAJ3UP/j5g+v2PkEfgmKBdSg97\njF22m5xIwmtiIJ7HA0ABQ9a9zjdMeG05lVTLQv8elSIJDJ3DVsbrrCxxPVmH\nFYjWadFM0hHD6pCu4vBJxUsnkOGSCmYlxGkQRm59bZFs1maUM8KocTu/wQhn\nWmMZCb0XLp25mnIU8p0STgnppRtrgTKu22Xkjqh/ooCtND9XxPq+xRhcfyA+\nULQelX0H9W079kG5v4EN8XRDww2zN4iucg89A920bJvjjYTFNWCc2hcps3Kr\n/h8uEE9jvEXoKPoyaSVoHS/XHwnYMaNwPt1BUxakfPu3nRQ7TARA0D7BDbBT\nU6gTQA2NvTcvFJ2rCWwEc5pEPDv8A8ftbL4ASr/Yde5lmCjX4HKlMDCZLirI\nnY1NghNhvl9QHUoESRzG5MZJ7lkgbDCMXtuQ2LqQRc4n2SeH2yTY0f7AYib3\nAuVI3DY06yBQKBa2skKO+pQOB2xwSgq7mfQYE1oEOEQ76KZpyNM6djP4t3RT\niUvFqvoOUfOfAc5KY/NuEZdc9LX/RURYCzBFgqhuYE2EhJ5i0+bgGuVD9y4N\n1zf50HA0tOHuvYY/q9Oly6wc6Xp9nWvLpbD4tOathDCAbxf3wEoacftCiBDM\ntR//8wJPpeAjMTVAhXW9KCBS9yehl0vcJNmVsoLG6jS2fWGLGuBEFMl2P3hZ\nj+ag\r\n=5DWd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE8wvzGEhg/tynv8vItkervCO3gJkXtI+cDoiRAmPKWWAiEAiR2Ax+6SWKsN8Eg9qQ2ex1svGCP98+PurAxtO2cKBaM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.58b73343.0_1592342634279_0.3531695579333567"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.f155c058.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-q7ySnn/UXJEDEd/bgJ9VzmxpyyG74onehbTrOtzDkJn40Cy3L5HegFO+XLfrCTxcNOA2w8vSdQnP19JN2+6Q3w==","shasum":"329d379a7fa69eeac5944a6e52480d29ffc7f36e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.f155c058.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe662ECRA9TVsSAnZWagAAM+IP/0fxSnL9tgI6mdNxcVP6\nK2zdMwDsdqKfy/y8uCCJmRcMgN2SuXfcQxEKYSPFdrssypVPPHkAxKjDOdDn\ndqU3hDVHXKaW5VT6BurbVW8cWhI9U4yM5tsbReUTlNt6egMf62bGjf/wZawx\nGamH9wC9SUQBtlYyskwxq+wkEbW3idWIvqIuywzfU4ReowKQpJeyRiEF5KPl\n9h1MbFyS2c3LxSdMMOZci8Q7mR0kgIfs+QTXY9VGLvM/B5A0laWcFGXya6Ki\nYtH4DS7b48hUxG3vahXKjmGbaVGYM0yr6VVMhrA1Wa552IWU+cP+0R2bvE1C\nAgbddfVRucG/CFus8wI3Y3jbvnkq2Pz0JMpJF7+U+lY3CoNnNa2pAN4BnbS4\n9+CqjfUFj1V/6TOSnYJRAEQTNVR6qOhVn1RawRdDX+mLD46wJFBfrHjP1QER\nKO571QOJaARSfQr9xbCAxcPEnFyvGNjLs55hBMwrU8Z3hNfEqhHploaBfL0I\nPwp+zI0XMSLTlfEJAUAVKYIyxAC030MDxabR6Y55rlWImJgGXo7EzmPggbI4\niqLbnUIgeyuc3uk/79mnEuapmG2O4Fql0yvz51sYyLy7EM134FIEsRIKEFSS\nOtfGegV3uxl+6jXx8Y3jVOsInfZSPpcWzRM0moDB2C5h4ovbgtGoVYbQibGE\nBWJq\r\n=R5mv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEfMyhkD0EdeJOejk/8Q94JD11ASHpilh1VPuJK1KUJnAiAbhQk9Ms1NmqrnXgSG3ijav9ykuUPHmrrWkItPK09JTw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.f155c058.0_1592503684205_0.3956930152232965"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.309779d2.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Dz4xc8ewxQUWgiW7za1qhx8H0ydYO/ZBVE54YNJo/0/sdd6DI+6d2vkzX0wLhg9Xq7+ElwcpfeuPrQzI2Mssww==","shasum":"591053812df5ce1ccb92988fe61bcb56de4aa9c3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.309779d2.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6/+9CRA9TVsSAnZWagAAU+cP/3rK8q+6BtfHyOPBmBkx\nwmjJg0K/5+HcyJu0uvxp1ld+eldEy2gmVILvxNwFFEdH7oDjm5Lm4H1ze0lI\nD5bVWBLiI1+vB1cSvIZ2JUxmMnG5mpP1ZEfnaVXbZm+IcFIfZ+AOMvFwIvBt\nCDT1hINlWJasI8Ls7Wr3/UV+AmUVZV2nlXB4LR22HjJM2sLglcanExmD48zE\nsJ6mWBjOhrtLwCEKBlWueQJBClaIZ2/1Ham5RsTzf9ZCypwJpLaVJpx5EqpL\n1+iWFpqX6hGgVcoBhuftnZCJ6Fnhmw83qijlt4Z9k17jWfZM2HbUcuku6Kdl\n7HvhLcyCE8RJurIetOUIG23H7mYsMytUn+fTpY80lsKHieiRwkbS4QuGoDKr\nyoyy2eYum58uQ8sa2J/If3W3w1/Olr3gvHffD5yP3yOEIrCe4W+tX+ebTyvI\nq7E8xJNKRJViomxyVpAw2pnowb8sNK6tHg0byPOkkxMeBPysWjlU60pJLcwA\ntwJ9evJ4W7Aju9lRwv93zveLHqMoExBw5rBkyow45vDxodZGXQl6DjLiLu4e\nz/qwDiV+OLyWALDS0fqMYv4jXiSpu6A4hvwZam8gHq1upOn3AsknkiPdRos5\nHjEWb3HiuJzVeGzmZHVx4Nfjycp1fi5Zcal7fz9EiqhabE0gYaFbEEEb8w2L\ntqJw\r\n=CUbw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5Y/N/Z1idmLGaOZVIxjdEGcVpkMBXHFSMFjFFksljYQIhAKFf4+/GU/faVcqVXwL2MYu7Sv2vPPTYT7cq3r9X1ZYw"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.309779d2.0_1592524733418_0.08993217624106387"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.e7649968.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MZYxJrQhfHIm4akRwZVpO/+B/9YmyYh3kJn1SAojjym2tKF4MPKUREdiIo/fPlYGkpv5nr1Si8Jx79BFwwRObw==","shasum":"9431a8683c74574442ee8d1a663567182bf10595","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.e7649968.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TDpCRA9TVsSAnZWagAALYEP+gOHBDR5YX0yRPo8YjRl\nm5kBmZUXxyVDtk0yocvQV5ZClRvN8vOg+sH6F7nHxxOCYrfhqsEiNLLVk8q4\nYWqI0OI6bWK5ybZgVUE6YWroWW2dq2ncQKzR4LOnO3qFnuCTTH0RWlz8VW2M\nViKe1VB7poBwLucvQ979YrWaLLYFtpYdhaL1GarMFqyj/fBz3BSsA9i6aMVh\nYpqEzB+F3cvYNiSum3meEqu1SRbw8rmjgVlSJf01eyTit59YHl3Qj8z8tlQ2\nCcBS6kcgAAOLs41O686xhTgk5uF4pn3VLCDFikB7VjdpAeiYnig4f0UFEh4E\nGSZsxde6Aoq8HftqIHGPCE+ns1/dwPBdxnLaVeGdMOmK9dDysRbMXP5kdW0O\nCeYWUazT6ZVrhN33uQlA+5YAT3U6AooD3jz9Drm9XyGfKC7FposlMhaG1uPJ\nlU2igj3eCzZYyv7RFJIvc4gi8eCXTVKPjjHjOhQvfStrL0HXhrx9LzdYtZz9\nd0okpJhQKx7FiaZqR2Psya+LGM1Fk9e+tZ7iUq14bK7kCzECbaE89Tt8AqCh\nytqXQjJrA2IAdn0RG9TXEZ2WBEG7NTmNqD5u/SHwBU80sCB4IZL4k5n4qpO/\ndzqHn+Is/kzLCNny6lZrpIFSdtfphqGJ8mdIcZWOmRo3jioi1q6IdeywU7nM\nPaYb\r\n=I9av\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHj5BXaxwmP/Yr7A1/OXaeHHPIBg6c+LC6qiE7NSqTiMAiBoofDQlMFj1JcNnDVf8s+aMIt5mtH3OBxxG6gImcZPRA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.e7649968.0_1592602856885_0.5871214043330075"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.8e21c78b.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-RMVsxyTD/DG4GC8k543SS3kzWP9Xs7gsdlEYxYWpakhNI04X1IIfqB6R5+5qnBnkm7HK71G/GGxoolFrTSSPOw==","shasum":"257ba07c9bf91b129edacf9e705d7b08d308bee4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.8e21c78b.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8IoDCRA9TVsSAnZWagAA5xIP/AuFRh5CdWkPlNSsdw+3\nQXV2b4G1x8h9Few3ymkwxz/1WbW7Up7DlEZRtofSs+I2Cvw2nKgYtcqQQG8v\ntWfq8+z2fu6kn5qalJpqnR0Eb1sni7fy4oRPsyR1dvaLM0YknTgazs09tyNd\nyZ73tbJTKVSArbjF1bKdSKDzsOqAHKVXd46jbWEGM6r58zDwQuxH7y2Tiis1\n23l74yx2a6rBjU4mDZQNVy0Lz2x9amXpC4PCHuYJK4hmeeE5a5+QxLKNEhDU\nFYApHbguELvYeXNzIZRvfwosGaIbtBs2R76C4JXsTW0TYQ+ju/wboP+riTlD\nOYoGSVOgfEzPqVBdHQhBWXRt2X/3H3O03ylVSm9u2KxVu2Pu2vHeGaWaIX9c\nMwhDTirSBBDxphWATgAh4q5GW6LA75BuadmjW+eQDQEtzx1b3ofu//z2gR1F\nCRmnqFBsunanLZlvaW7jjIAnSbwq/oxY9G6YT5Ird6r8aCPnrKZ/Z6L5sVpL\noZZjXnJw94u3mRTp2+yHj2XZDW/eAr6Pq3LErzC6MLZZ3CH7tPwd98SVdgwT\nzZ11d1Ukr/60fkUn/0dnS/lGbNW/n0u7gv4Yjd+DzHxB/HJ4F/8ACg9aS9+q\nz0dGZouPpa4LZriRN9tqitPd4DSzFn4NKIVr+ts9BwBsVNO290pG12jLIJDP\n8DTq\r\n=mj4X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxQd0yTuwkquFD/3kEIkki3IUrBKHwC5ROBkbZBqmDygIgB9T2j5L1emhZwb+iqZ2TeJRjYANRfQySWkFNz2azvIw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.8e21c78b.0_1592822275207_0.8325330638798092"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.6db76faf.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-hu09HWEqoCPJ2+S4U55fgjf1GqIyqldt8oC55aUyK//xfYri5Al+YOFbmD75ur6LiAxl7q0yHDTTWe49Z+rEOg==","shasum":"287cc9b273bfea0cce57220fccf823f46af7a8cd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.6db76faf.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R7cCRA9TVsSAnZWagAApn8QAJ5p6jDO4DS8UMSSVpA6\n09RaiFfG64BKdJ6KZMUd3MV7zxslHBpW6UJI50klqK/iO+pHCO4XVMTSWadO\nzwVyKUVz5Bd4H2jC+dL4D7/xYCaoKvEgMG9vLI3WZJmd+6/2F2Pwtr11HFPe\nuqJxDapGCtZBhq1KXvNzns0vynYxA5U7N7DlTo+RB9ygLe4Xy8kw6+TWrORB\nCdERdt/t42El7HyqTgjQ1MWb2tBjr6wwJFbDTHTxKV3TmcGHT9tq16FvMBNd\nao+Cp2m6zyKIfBo+xiCYU/qQTlc3vrIWv6DFfhZNWMat1J+IAUwWg6snuwP/\nbVdaADyv8JBsXcz0kLgKAHAjm3xu0vNxrSBBVOJuMKyDA5YI4EczLjxjecyH\nZF4aXxy3mlihFh4+GZsf9KigmNQ0KDC6xgJsSFqkLs60NuIXoT/A+FomZddb\niQWnHFW93RnDh1KqmfmxxiJEEJ5cBV0kRVxmle5c0LyTdz7XgvQNPu77Leuo\na02sktZsrbJP6TyzShIVl6+yA/LYU3s6enIQ2a1+vwhBrMMwrg7yrfG0yIDl\nLq6s03kUlNgkuEH4Gy+0kPWXKt7HwjSySoJg7ctOgVMu/QAKhFV7n8P3iqru\nYPS2w7jH5jr3nKwL265CF2aS+ujh+ttLdA7L0ALGvQ8m1sfnxI7JaxDwOP9T\nniJk\r\n=8A2q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQhSYaeBrahf1RtGiyRj3eSDMnFza7rWbA+XpTpMT/GwIgY6JijSUenjy+5dCRv6s3IfQlKk6QX3o+zGfxPKicQ3I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.6db76faf.0_1592860379949_0.42749938120041464"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.c4dd9684.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-qqfYGWENK84fhti+e8yH5oHB5GnsJv4jeE8WrtV5ZVtN0FweQ0tYT3K3pyhVSokqv+D1XfGXcKi6aNPbf0lO0g==","shasum":"6c5ce241b64b529b30b35dc70bcb8b438fd62630","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.c4dd9684.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hyFCRA9TVsSAnZWagAAxNAP/joXVYfLxv5FmL+Uav/E\n6TqWFfOxUPOp1pjYDibtAf+yRRDnyoJFhjYTMxki9neWVXp6Xf9BPblnf7O0\nSXaPkBcwSpmTsjeIObwYxnkmbUuSHgOYcWXyvwBA7+ZwohWxS03HLuIFewY5\nsAFSjC6ALUfBeovU0AWl5S5Mw7681tB9A3HFuQvLjWOIYR32c3cqrM10aEr5\nULV/u32ZB/ZN7XImPHkYM7L0yDKwxoHcDLVnW9B5Qy3AgmnIOP07c4a76ozp\niqVHPC0O/I87dPen6dHXoUaVroGBbBhdVTXkGVEIgaYbXXyfSZE51pmLshYM\nBlwFLA3ZArzHH6pFfmyptzKvwJafAY8/l4w78RIkmzBz1eoB9QrXu1gj0ORx\nzvf/rcVTuaiVxZD5gUmPRKMTFP7s9T0O0p0SdYsGWRumZvq2auSoi0IS/hsO\nTiTgdabk50E+CWjaJaYeTvsg56mvZJUInYYdr8f4ROM1zSlbWr++4SIeZwXH\n/Na4aIWRszFYJpOT3PnCdUCXkj67MjBXCz4c+NTPmSVDpmu4R47bn9Pw+jzy\n1t+ZvoigGOM4uk4dMdXQBkz70vlIEEZxbuwQ/a02wJUyIqBquZDxxpPwvRoq\nd3BIlLChbDVIz95Og6zUhAnjS6M0PHu6zdyuC0jUKNqJNQdQKzqYOPHw1gR2\nqhhM\r\n=l8GG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeFn2xpBSmbZTcdiSsfR6FcyxpS3602N8QUXvw7NoqwQIhALYpoMu2hqVDPasVip7HbaVYU+Nv6zO3rhGCJ3KjMUNP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.c4dd9684.0_1592925317104_0.7537507207339036"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.b3e53981.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-9wnB28XaxtOSoYf8DXLilq9V0Ae9wVlEJiNCVDJgHY5hPcI4zoM79LMI/AX79YRcLVfHU/FOsws3PYvGeZWnQg==","shasum":"64ce3c94dcca711298f059e7418b80485a1b9afe","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.b3e53981.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qDCCRA9TVsSAnZWagAAq7UP/RrSmOb9OIRHmNiDBbhf\nFkg/VBjdE6Q+H0qpKH3NpncxhovW1ji8qxst0TMTZm6TimMhJ+gDGGJfTT2m\nO7OQYm5fuJpYjR477qErX2aYPEsijdEO22sq6409DtXwYUvFiLZ3nIOe3REo\nQi+wkElbUeOJvufpy+poPXHTyISVsKvI2zFCtuHFlOiZbN9pmrcyQPIudqKh\njLlKAOhyqkiEmyOxxM7ADUaBAKfj3dBXSthYxdYD5BDPQkiYPMiQr6zsnfoP\nimJAq9OWaIaKuWUmNwe5WiclV2dpsgqT4cz3gAUEYP98DbXp0XfszU0E3xCV\ne8scHPMA+xXtRJjlpWnd0S08cfpVh6Ux27MZlIkHh1W67qLi41nTS6mjU0XO\nbSG9dCpE2uygHhT/ovAJ0QtSNPs53ipTADrIEj5a1dFFVNg8myZ9zuiTUBoe\n+60/i7rlYGKTCKklNlqsbR92yWm6iKLl64qdBLazGZu1ghhVRHLFMrSM4yQZ\nON5jtvDEY9nYfcuDEx/Bdw4CCtmMpDuE9o94cBPBLtcYRRQojUdQYaJqoYPX\npgB+za8BNrHW+1LG2+SdCqWYSsqE4fylqOXgHlOqCGOHgD/MYz5xx//w8hl2\nQnZdWZiNo/0yYBBP6kCSsSuWrV44+bu0gwFeEa9FUC+Rer1EVfv+s/SxLlfR\nDN/D\r\n=bp+m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFf7Fo1JUmmrOcn2cqh5mIgvic3YIdb6l10HHmyRvZTGAiEAzmd3nwAwBVXQPoQ9SVdKKtBQyKQ/PWjgwM76eOHl46s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.b3e53981.0_1592959170099_0.02520412025326424"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.b9468f77.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-/9lcBQZUkQI9BjPQJXq1Y3lUfdEFt1DUMN0nO4aaDMtGInovOkmw9NVvIIexzRkAemzxqSzK9PDVQYzTFFXS1A==","shasum":"7d8e32477f6620b3deb28c14e2a275ee268e7db6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.b9468f77.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88ubCRA9TVsSAnZWagAAn1MP/3/xIMdhZNLwxrmCu5/h\nY6yRTOLiOXy5KkN2f+t3APuxUwlJ2FS+CMu9npG79XYA86bPUwLaUd7ERLlZ\nM5oU+I76pEqo/qCDlcZs9OPgy9n6TSlQu30wdp5/RrwwKJoBS1HO35wHBEA3\nXsyL4IqIR7+lhTQVl4HYyXpzTWiEmP9hwu7Tbu1ZeY0xH/PPw3XuS+hJcd+n\naRIRRBfBOj3DpMYLM12PT+OF5nbdTOLC3l6hOiChccLaHO4ouIKhaOuTCnda\nldYFQqyqAHmjyeCH1nuEDlnMWRLi4YcSKOn07DUySX+D6ptt/5hOnMV2SfAL\nExuNivDehj8DIChwyFzHW+mK8Ix3Z4HGeAwpJj1iDpKvjkjA9ypAe8pV+m1+\n/SYz8rR8OGup2XJxZe0WjJjWpG3sKYE3gXio5uj+Hl+8ymAIllecceFUDfpH\nOievrg+OEOKxHNWUuJYrbpzgFI/kcVcDF/O59YlFNw0yaFxYSvnlzs9tz+R9\nv5TFDGaKCbinBuWL4rVsDxMV5tm48VchDRjLQ/e7JhHX4V8RI61C7oP0a5pZ\nJv82htDf+S1CN0SG9GpEEYdnJ6JZIa4M4qNYzP/GmeUFFdsyH9lCTu1C2TpP\nD7JhUcnXKxvJRmp6mYpAIC/1wHwi0ZvbGa218DLkpvQSyP7vY1umc5UL024m\nY6Cz\r\n=YjAr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEtPi1yNBz1zhZERQXu3zESdkejtvoWI5ItAk1UBjDPMAiAMBHF6vKxNHB/27EyXrc50G3EWLuQHtsxia2+tDdSOhQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.b9468f77.0_1593035675415_0.48342239906790496"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.eb790e49.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-x3wTH5//5/EnVC2KZ5fePZDBOzVsh4xzqUjhUP2+G92OobySrRpBy4uswDJMoZcy6k9EG8i1kNPCd1SkdDVCrA==","shasum":"03ff377e5dac330b2563ca639c8d4953a4226a75","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.eb790e49.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RTPCRA9TVsSAnZWagAAP68P/2VTerl9eDy1158VLsY7\n4x9tAiPSYJeYZHMf+Ij/xcNSy/aShfhqXSfy0DzpD3Elz+3fb8e9n/GP+nQP\nT/l5x5HNuIwFXuJqsQkycNf33yTMQYXGDahZUNzC3KxEMgfwuqrlFfPcRTX7\njdgVG1ogwZrdXCVNn8h9EOZEoU00xkYcHArMni2Q9N/dmdGN8oDcyWOyQsEI\nClMoLYax13i9vAPV0Y1QA/HIczR2LkOEZmG5oaWIzZ97boLT+PzZw4x2Vz7F\nIl/lBl8jJ+JEYiA/gJ/jKUuRnnUiBjh/kxEytq2Oy0sjCc7ZWZfps35DADrz\nqChiFGOFG9hCvO6pnTcDsM0jqJmL7uMGvLRoT76MK8USdd7gkzwxPapA3/1A\ndBnhdP1FYMDFjI04pqpS+ciE7T8JFn6kQk5ujqkIaeTcQ6mww6jZ6xy7WWHQ\n2q05xNHx34r12CnfdyLpCmdNAMlV4tf4azO3uzMIXcPZDqiRSatZxYsWeLD6\ngErXrqRiE08MwBeWHviuzYmu86eqC1PD1QbuXxiRbap4vCSeqtSevJDHZ9CU\niIjd59QCMpTQvdVbwgAskisA8mIs1ZHRj3NorFO9y4441/kSV4DyBFrAxWVF\nxxB1t9+32FKTH/LBb5Pj+ZziuEjZNp1hPqlvvhJwOli8atlE91Wm6W08V4wH\nT4G5\r\n=EtwM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDU4cE/fdO93zeutRQgFUbFmkrb5zsNSvzHhVMm4mFBnAIhAN9B0zrCpO7Z3eeAyNLDywnEnlm9mQhR1uOEynwoNTiU"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.eb790e49.0_1593119951237_0.13456592126963463"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.9aa1a5c5.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-/EEhBULxUbCvPYhFJA4P8Euc8JerSLVdx4p7msroW0UjwFBw2gcn/VPuj9ZXrGkN1d8zniBXf+Zw0Kt/YfF5TQ==","shasum":"dde7eb451077c0480a6d86d86a54aecc0ea8fbd8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9irXCRA9TVsSAnZWagAA5S8QAJld07kV1CNFdjAGL6nK\nFwo8M1uiYgjcndDu3UcbZpEmDWGuw3hJxgXdp+TyoRSDRGuz2RN08tuyDf3p\n3t14KRMAUw5PSfA3rDBQ75C4M6A/TVQp5A02kOBpZJZhCNelVOJj9jbcJEeP\nRZnVUyL9g1XtifYWNYlM+Xe3dup3Gp+ssuEV0YKoqpQaUQ6pOkusDKTOupWd\nNNdTdQb4htpJzUbPjuSMiuOSW+/DlSaTHmpQGZTJ9ylnzbMmmH7ZzZV1fE82\naSfO6AYe+J1yX0SppDnuGCA2BBfkNZ4tcuCwp9Tk3shAX4+Br8ceKBBQfBu3\novjchNPPLxolzoPS2/5jj6br2mCZ9LHuNVFKs2zMdr2NFoO7G6XEqwUEjOcP\npwlP6n91aqcHDp6lpYViphBqZNHh27MwTynJDjboHGBQpsEv1FKd2jfi4Olq\nqhjmOlsepo39DkIoJfXVPr6uG7gT2z2feHhwGRm6mH0cb5EW8PZ2IeFywLoh\n5i0HYjJbAAMZb2IMzsB3+M6f50sClaMvW6HRc9MNQc+uzVjLc5qWnxyl2rqG\ns6KS0NdFErg8oOncZWw8bcXCQthnQP3HaUkgUB6dCoZ7S+frZv50ZUYslas3\nkmx0KyowJ96H6hJyIkWFlin+w+Cstdz+9VAxfQzNKlGJcqQ6djS277A18Tu5\nIggN\r\n=Cg/d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICsI1vTMk8be6i5pSFYWTcSNSIWWIJRCE2RuvvBUg0aUAiAMOztrlbK45OScKKrbqKY4AjTuk/k8K6I/Ssq+xdmt5w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.9aa1a5c5.0_1593191127399_0.23316991127285314"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.d36e9861.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-KkQac2N4X3/l9rcZQFwrj8l4YuyyGV2jhmRAGyOKiWr/bOUUJqaVk1jRd/x/q3JqN2Ye6hmbFovGG97CXrC8+Q==","shasum":"e798dee1bd998762981ed37492efdbedc1c0d931","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.d36e9861.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jImCRA9TVsSAnZWagAA54MP/3HVOBZqufODbANUzn4z\ni7axSjSqbHrpJoAJX+hW32z/+3DVuRG1Pwbn8+2QR+7xCi/goAiLZ9wS1EVg\n69AVVMzrc2XfR2TZEjknQtELYnQCgaz38ac4yArVW89M9B8lf5GUFV26LTkT\nAKYqcs8aXDBOqpa2+Yf/SPEcHfAkwhliJk8MTUkBlRC1EzcdZ3LObmzLrnpH\n4Jaanof+j5u4Ejo4b3bnNDr58hcx8hvI2rvhx4/1kbovJPqw+PVrvKXapaRv\nbRvIKj193Sfqa28k0OZFs5VYoB+qpyCsIHY4Ipa1RKtuMncNxuHxmk7OF/2x\nbHTR99o5v29ORZBQeQzEyis13VkfnNPQoXcfUaoYViCiCoPq20m0ySY1TCRi\naHTVbIFamQQR4m4qFh7nf+ZPZRHsIgN1djKPT44FTxIieUg3IA8Q7/uHCkf1\nrFj9Pr6Su/ZyMgPKafqRncv/z4+gnSDfSH6Cv6H9h/ubi8/U+czrGXnrbidU\n9o+JJtuiAk1/BedZVGq51mqUQIPAYFzTXtmXqladDkzqVOuTeEssYL0WQFgL\n0AZ669/bIPH19Y5VXQeoLyVI8x990FuYBmTHY8I8d0PGcuryDncao2d4OK/q\nXNGG7aMZXyBcY2NN5ZEt1uQa3IwWt0wQcCimcjRbqRUA8ptB83bseMXQu5+E\n4ASU\r\n=oqI0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoCxG7kAk9byTNuMgXHw1mhae8yCcjTOP9BS3cwN2EuAIhANTtcoLP7tpmJHDcN84ie4k8SkDskqOElUXQtDJrRTBF"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.d36e9861.0_1593192997660_0.6057699595196337"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.155c2f85.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-O4D0xS8lazwahsBcJC9RL4UBk8MiywvvMETHO6IACMZJongw9sXSWkXjYWwWV3/QzrupK3vRpHo7awt25CBxKA==","shasum":"3cd4362ab73ad07d53ae79b234d309cd2466af0a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.155c2f85.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oUKCRA9TVsSAnZWagAAQ5UP/2YVBMHdR3v90NblYLqv\nlsdF+yhFgGztb82GVzOhYVIdO/G1+4TfGUhWt7t80TmrDcJxOxm0IVRUjfGk\nlbZQyeYPaCitW9T+vHHTPA7qs6azI/DEZq3L36LRTUQk6cG2ro58eurZJWfW\n4mBOOqrgsOiaFzTU0bD2GB8MrJTZmUjRyJ0zGDt0XGfR7uwFGFdT46v9l5Lb\ncWR5C1jnF2t4K9FH43kK/Cp2urD35+RWGpRckGwV18PUdgw1m6NYEHfmS6TW\nkZZ76q05hXKUz7Q8n3tVqashOOYNtviKuUevp6XA5xrmIEDNV5/i4RbcviJk\nGc391phtJBtBM1kHyYSyPmvLbhA4kG4/vOhl1KMV2eEfgnCIe4UHvZ0reD+R\nXPDviEMrLBSug5lGJtHUooCL1j10I1oBsOqeKVONLl6vwo3G5LsbLCElTnmu\nTqfpQPdKJFFG4531ToSt1YRRwxTBr/l5MHxEzw1e6WuDlEltw4n+PlYakmtq\nMt5tlin9ipSYxNyhi0xxDv1Tzb0etk5HPDxk3OCINYfXGqpanZpwnSt0ssFF\nJyj11qHxNczfUfWRUR2E2SGRm3Fioje7WqEzgitE5CwtvmwuPHz/4bsSrP4V\nDOMZl0VzUoxVSPPHOkPEVKEw6jXIXMTEnOqcXWSGpQIOckj4UiHCAnaUSHTT\nJu4o\r\n=2pia\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICUXatt2QO7H5TVOYtjw9AhVtKvwc7V378cyXz262dNvAiEApM1Rp7+E2ekEDxd2S9WU0ZP60E2kOgmrVKj7tpY0M+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":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.155c2f85.0_1593214218087_0.46654411600940904"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.340c9c40.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-0NwZ72uOAfurQ1LF5MB28Blil5BrdhPgIMEb5/rX5HX/RQzKZRkhQSd/l8r2t1U586zBIyneIWRuLzZGhYIJQg==","shasum":"3aac9f2871ca9f0af406fbd64a9c20635cfc98be","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.340c9c40.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9ob0CRA9TVsSAnZWagAAfjIP/278OuGoVBZsRy634sNT\nY8TOOEkKME/30OVh4o+5thPwPGZO7rU+FhAygPlt5GDnND/oQynArWqrtIxV\ns0bnrVjwFGUWobgFZkflo3SevsE6gnDHJK8oL11+SxWtNsyHxYR1F9pZZE9F\nEPfeuv+dgLgmH3O5xGI0YI4KJrWltQn6e/iD2ZWQ9yP3rVOa8j6XJ+BBTpPG\nHZE40XQZhZBvdZQYzobenTEDE1o9FiKX/bCHaN9tpjsccZiEcGex39IzigvW\nqL0LR6cF3X9oS+6IpQI8NB76lWym8zvwoVeugB1K+EhXb+ntAly04BDsMs3f\nP5eu9QQOexjLnzb2/Bo1FQBA4l+p7miMlf7ih8DpI/InnrzzyOEi89ANrMtQ\nDbyo55oJf8+cR80N/oeiO71RFkWhxQt5YetWyDTEXC+a0YTEhn0/k7PuJUHE\n+PPSlKBLUVTQYc+A5ceUv/pQVfesgGDKsZcTVunhHKcVzoqxMUjI8gixEWJM\ngRZL1kL4vkzmts3K1N3zeZZq0C25QxPJ487a0pimxGnzpv4G4uDyY6TZmy9A\nyvicSoxqVSkvPF4CPMf7bkMmbMmJHQMeO98jHUy1mjxPLH3Y9clHd83f2kqJ\nSnrzFOiHIMvQAvtmPbl4PFI9/T6yND4tW9h0KC2shEYaSILEhJE4usf2HHLX\nFu1B\r\n=15yD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCc1TG1sFHIiIqB3HIwMRYt87B/xK3/KrpFDVX8ZmJVSAIgZXKy1/FxeNe3Tk/6uYihGV32tFty0Cjix5q+dEpxV8g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.340c9c40.0_1593214708365_0.513433520170701"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.16.0-canary.a3384d2d.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-71qhnIJKt3J4KsZycrjgDFKtE8XxFkOxLuUdzUBQ+yVkxZv1clw/zVHl/gDJGQVyzRb/deH5A2Ww4ibW0oipuQ==","shasum":"4e2c3af718bf4815fc6cf9adc154a31e2e3a714c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.0-canary.a3384d2d.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6f4CRA9TVsSAnZWagAA9XwP/jHC+9DWdKX7/y90K1AN\nSS3x+oCSPmmAAQ5NyXyV5fn1JqJ0qqKuDTjBvm6gDUuMHah29i/IULau/10g\nKcBHI0G7M1tKUQytDCuZNlpNg3nVhiKTFU9ekiSYluISEqNR3YT3DP1yajb2\nSLaAuAP9rBZG4zkpVHcjQ44Jmgugbdn76vnYZPSmMNLjdsQRME5P+qIcCQbM\nBEOVELXiIxLpT+DPaqFlN6/j4zjYFmdLMiSAkmc8XQYaj5/DjQk9hSvFRxIB\nprpHqWfW5ieCCXOPTiC8Qjl0jIliNMejLKJ0ulsdH1Nqp1aeOyYpOG9VR/3I\nRtDfIvCvhnelTS8pb85lzK+TmTkNB17jnDnKiOaQKc8Hh2I9LmOfV0DBwZ8F\n1LUPB1yEP6cTVgSCLnWf+jfwG7iQqBIoCBQuW4wfNMQIchKSbzB3qA/L023L\nkkUtgshvBZdPjc+nNJBXv8SMRFeyXCDN7lY4Kp30BZaWjB6HpWuTTRHqBSkN\nFJVOujf+ZpNR2V1QpSWsfYDs14BrwvwBNCzBVFEJE18McN4T5GKVejOqfIFK\nhc2IzBD0Wk8BCOnLxXfHjsM9n+itvW0wMS4y1vWUFL16Zvt6e8KrNQ9Xo09L\nhybkHWLCS3+R1TOeidwrfa50dic60VU8bphAQs7iu7s4mb1fYSz6EKtxO2LX\n4Cc6\r\n=wCcZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHk+xxlh2VBaZ7dQJSCGL8OVypDe+deZgdgal/SCGsLDAiEAieQ8RleKqLZKEtsw5OagofmzXhDHT0Y2lZRVsjBPf4c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.16.0-canary.a3384d2d.0_1593550839866_0.05318644853261012"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.17.0-canary.6d056c96.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Ocn3fNIRAen00FGqxicuK1GsXrqtB7tHUZIyoX/wAb0cTjANDGN6n5ZQhy6HSfkqhprMGg+gAvCGZ9GJGu33Eg==","shasum":"d887f60019945f11c86e309de4ffe8dd83666e5a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.17.0-canary.6d056c96.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6orCRA9TVsSAnZWagAAB54QAJCrGN3Ib+ESPIHAfXDL\nBZt8bL+K3oUWKPb4c5D0ti575NMXuUOhwseGeptDWENFWiW1kfEG3UIoC1c0\nlFpIjr/MYNIsvOYqZZAFDQe7xPil22hCRf7jGiHWg37yI21weXqPR7ECtJYb\nh9hXmTccnTllzkQ5Z92aezwShVDHoW3TqGXjt3+GtUYZiWZshHLiDp0pBNEi\nhbQVyvWOKBahRtuFzdPwiuWvjkmyGIz1F3mqNmIde0opCenWWunNm66OIybl\n9J9p6YFWz4DA4jxIrQAWU7lY0fQa5+lK2oxht27uuNJM82SckSjOl1naLVIX\nA25mUDOE88nOP3D7+5PU1EfJCjcxV0mBBt9STRBKQQ30sekDExIqYCDZk6nx\nfjNdlmVBlU5neIW2WVnA3Rp6GvjXkorOkyF5p3hb+l1NbnbP+OnWlEXvkTGZ\nniw4EGi7qBMUE8sfMRTPY/zYLie5JG5pTp1RKaANysBZaGd22k7FWBVjFtif\nT8XPybjwMBcJgExR8tHWxFCZqc/Mr4Jah8xoNoXkX0EQ9Grj2yza8VQoWuTv\nABmXfHEeQRp+Mac2FcIKOThyEUHkTrJsn9rIBl12xTismTGkZbe2iuyjn9VH\n4DzOPggk65Q3SGAVisBV9KmydYKm0UddBXUD0WQ0IECyc8kR6FWe/FxKnH9b\nha5t\r\n=ff7v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfcdc7j0u/5wC0bj5mAAy2ihKDsS06Hem33VEhvS+zYwIhAJq9bK2WqGldpMVnhixu8A1F2D455NBlTLBcTUjYPPWp"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.17.0-canary.6d056c96.0_1593551402502_0.001944089553321593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"^0.16.1","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.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-fixed@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-Nbs/09KcCxwahRqxP/X/2/emHkOfum8+YAXM7OuLuTpKZ1gIZiJ0pSmQf1DncGDaAk7Lr/6AW+2Xdx0vx5MQbQ==","shasum":"d2d09b3c43dc2ffcd3961a64ccba8e33001da089","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.16.1.tgz","fileCount":23,"unpackedSize":70959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6tRCRA9TVsSAnZWagAAWTQP/iFBy5YKgQ/JED2NyU61\nzbIL3V+tG/S4H1NNARZGsp4KwfQD4Mzw80n2kxfz2ED8x3vWKq6bJUMlWn5P\nowxR5Ie59dICNcF5UO8mJuSXiZWVuMWZ7/p/+tZB1S+0SQO4Dj4+cquBXUP+\n8g9pmXZPRjkJVs9Dw9DQYjarnhsymmvD7EJw2Thbpl3Y/TOWy/GKzbLZFSRU\nRImU1qN909/bv52Dd0Mv+zvtQqdbMR3Y3nJdA4b7//tbubBJRoIiTVTNWulZ\n48lqmnTnT2dUuIPGf8exK2qSd2gI002sMQ9l6JzoN4IAKHOI1bjw9/WHsSR9\nW7oUghzM/LCLG+PHi9aGAVzUiBrdCBviPhbhRmwlNlRnQUka96FLbgB/wtzx\nU0ctSbLvKvaK9mBfNJkUJ7oW98Ltnct9YxM9D7hBQ9NI6/djQ1/D7xpQEWVl\n9wMmLKzFMGZW72IV1hdelcIumWrTLHOnc8M/j1m+C8+FQFn6OT60mFFue/Wk\ni1fAfF/uRhI5yHEIC2d7Mpf+6rEUEeBUf4g0m7zCSFU23YlIVnVPJi5IlaxW\nMFvgfFnZKRzXBtimEo9nYWrgMWYz71e9fLMoLEgvtc75eGf8Trm1OHW8V0r0\nCaHJiTSqq3NGvyVk19K4mQRncjOeY4JT2/+d7hBxIdA1JeeKWv4avb+AZ8Xc\n7hCb\r\n=M/gX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJyofSURpxzYyhRYjmGaCXWbteZp52kJ0/JOmrfJQKzQIgW8zOHEC5vkcbAZJQ3P3mE4AGydcNgrvl3RpmSS1ursE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@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-fixed_0.16.1_1593551696737_0.43733553014553417"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.17.0-canary.f7e37607.0","@material/top-app-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-rxihkY64PC2Iit2VvI/01D20pEGxdtkJp891iwl11+gnvJD3s7xepOemgmMCLHdh5qjPmP+0dQPS5sYgDoz4UA==","shasum":"476ebd2d728495502cc44b247cd6a968e12ba197","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.17.0-canary.f7e37607.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7I4CRA9TVsSAnZWagAAk90QAJOwFKL6VTRjmbhG1u70\nnDFxSAmB6MeY2HUBkS7H0h1MQ98pqEKDINohi3DgHLCjWFHiQDLRIvubj/Av\n09z3slztA0PM0k2xJ1q3p0i4Rm6kCeTif09sAqCpae7HabLoUjILJehnyrzF\nqOAbzkzp1Ti0NTmxZ4tq6GnlyVxTmn5se0w+HDDB2y7KRWmCLdkpOaM+MS0g\nG8o1paupcCMx36aaOpbyEDyZqRCM1P1Jjup1dR3Q5j35tsZa65ULm2WbQ5h0\nA3of+GKGDGnI3lUygKm0tzZWmigmcPpcHihKCBh/zsGdIRpQSzp/j3yAwF1r\nyfQl0gjCZncZR8KU244YbhU092r7AzoM9HHuPioSApo+l1YWH3A/LuZ7G2Yb\nezSQm5kwm+z2wd9J3A4/RmzEL8GLyNrRBV7Au7vl2+N5/rV0cJU8ATBbtuBN\nYFnQ9avHShhXLj+uWiNcgIFSWa+pSTdhEQOYVmqNeHfaGdWpLNsH6heAgCnX\nu2CVCqWJhkYSVgxLsF6fGcSxXCpx+q/yt6qhZdax+fyU8kjRIYvK+/5tcUHW\nIYtdbIJWnyeaKyLmO2EmKFzwXpxsEj6f0Td0HQE2f3cKiBxZczJeb90WUT/s\nnwEwvQmg6bPzYbNB7OQCC39b/BJLkqepR3boxAJNrKg/Rc17Ua5r/ufYNE+k\n3/D3\r\n=NSoj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvV5P/ifxr902d6o8TMnCaVyiK2rxiwI4h08NVz6ZSIAiEA5+WVIHUHaX+hpERVDbg3/9rurHe38gKAzpp/nReIKsU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.17.0-canary.f7e37607.0_1593553464199_0.5567794882171486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"^0.17.0","@material/top-app-bar":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","tslib":"^1.10.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-fixed@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-0Sv5yZr9n4r9VmMF+FfOwX2wcuOMBj6ZpH8EX8Ox6cuV8aY8vbDNeuH30BNYnCo+63K5pNp1pFUM0cFytZjYXg==","shasum":"7f33c65f0d7197409ef6253da1814f5f62001c53","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.17.0.tgz","fileCount":23,"unpackedSize":70959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OekCRA9TVsSAnZWagAALMsP/RzaLBEytH9XesdtdECE\nR0AlmL7KIafZHqvwo3Lf8WeVzPuwqKaFbYurA23fXMefUdtxUDqyqwQm/btw\ngxKBDCi51maz7Ybkrr1Z9QjZEuJPJ6Octkz0762SfqQMVJn1xWL03Fj5W0iH\nvSq8DtJmY0yis1qcr8/WUGtS7gFMDBYIwGD+m3C6Ocm7S9Dfmst2rYqb32Qm\n46cYax4w8T3LygQwXe3YE36VJ5J+dm2aDYrjzZ/eqWFZr7XkPZdPWK6SxlJ2\n0UjaEKsiMqH+OhlsVMjCZT9WACl9bhsNDLs1S3xIICYLT1MAJsnKcM/BEnLp\nK9Sr1vxvbqzfAYqmdtysQT/OT0hRXfUxOu5g6LA8aNRMXRG8KBVdEFasVClB\nem7s0K7R5pxyzHxyKDSET8fUwceszWh+x2l/zdHqQdZCezLgoz890Bm6fqVy\nZ45SKWIEvAhev1j4KB18M9qnO2WmEk38gjrnX2MQy/zwV+eprTu5N2rJlvAn\nGpDuY9kv3OBwD5SzplOhD3s7gUlOpD9GOE5KOmILk823ZVF7L1vz8KhXUq/G\ngXGAgVU1T0PC0dMbAbXHp1fSTcbIgFpfqFtmbAmX7gyb5MWFeuFSunfPEhgf\nSUr1tuF79GJ75/UZ5lKBzee4KiBTIt9IdiJz7zI+/AyXBlKAP0iF0b+tgsPr\n+8Di\r\n=+gdz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHY0+iG55q4Y+aqGIbYCPMJ2zB/550etWJah71mHQBDbAiEAvdURRoVqiuFZacGPlFE3+zURup9rPRr6Ih1dVUynJ1A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@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-fixed_0.17.0_1593632675735_0.39341078159995124"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.0afbfef2.0","@material/top-app-bar":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-QtkNJmhM3oMF2zTb9fnIbXBZ1zzAF4vFemmYfwhaM5Y7j0bgvfdgdi8dN3jK0Ml8WeWh/VZPyNS0BmWEzkvePg==","shasum":"360781bab101c0e8b0ceebcc8672a2cd2e472c04","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.0afbfef2.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/Oe5CRA9TVsSAnZWagAA8sQP/1sfO06Of0eX7o1QJjBo\nSvOxixCHROyjNx2YEScOw7O7itXRpCgvzOnDU2xMvYXCOdcQVZ+/bAoRO3DS\nfv7tBlexy3FDlkwt+Y0rZdTPyXYq5/SgLNucb3yfSGBcbq5KrLOOU6/Za9cl\nsVDizRBMEaPucosHI7I+mS9Gfu3Pt4g8WpiJWJlfTVG0DM0hNwXSU1fSM9Sa\nLD8/HBEKxBARmxoG5QxrdslnBvd+2+Rv+ciRqRtK+jvYoM+CSPvqclF2P+Kp\nIqVHhGFduSw3XXSjt0aXp7jAUltZ7wnZ2c76Qp5ZNRpihm8+7eE2cXZtjYTd\n8qeGgLZm1g0HfrVnDjgMiakOnnM5mVyiUbXBFG4QSYMoW8VBwGF69X1Z7G8d\ncOlC1id7uuJACmcL63VGPck2zPP+p7AJDAXLLMLzmVoUTBo3GE3G4yEfdoHX\n23AsPRCMVmTEHZg7tESNHO5lbypDK28ziZsK4/TA5MxIFyOo5o5wnpLMrIPq\nO/fzXqxNR4Ugp5pYUN7U64ZWqnq+/0+81E81/XHVS2PaaVE8iSwhm6who2QJ\n84/vNioySfzmQZ1HtKwGvjbKhjkeuXtyDC1kGm5qqtn8u6IBnniYQcgJGnpg\nrmpkEeprkdo5eXbyvUV+5t/8F7TFo81/nx7L3n9Ih81RpsI8NzPgokgHW4ft\nlKlg\r\n=XOnU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEiSSMgBbEHiJ76OUH5vtyq67YheEuNyL3SKTDisYjGgIhALA0Q1UWDCd1w9As3J8W2pItwfbmqXTVwQkijI1/x1ok"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.0afbfef2.0_1593632696783_0.8075510609613628"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.fd970958.0","@material/top-app-bar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-8mmVq2sCeP3IRr0hjL2sHcBQif/huR5eVs3+l8ckA+2CdDmV8DHqWn3lhnuEkjohRu4gu4W6Cbv2LQn2a8ab/w==","shasum":"b330c0808ce4361d7668d96a27bc4b23c133d662","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.fd970958.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R1VCRA9TVsSAnZWagAA3O4P/iZQbG9ls98e0JR3BynP\nJ8gqrxJmpQ6JMA5IG1bjsb0Gt1Cr5SW0uHNz+dkcnAfWJxdLOJQIbWVYn5a8\nWLQhux8z3D4vOKaIyVeu1nFMwrSL3zNk6AvoSfwNJeVnog8lMLclpM9rb1TQ\nRuPezQ2gDMVIWvLzQ6n9a1kXq5TcGsk6K0+9K59lrBIZ5E6dflskNXgf0xSq\nC7aaoWFkPiOiSDd5AEJ0Cdl8MCuhQUDVdKj1ERDqRLDu+X8k/BXJY52F1tTT\ntyFYj3umh5MjBM4owh/j4zmTG0S9q+H8JJMnmEAhKrYm4JNTvqUToTETguLF\ndJnHpw1PMgq6zP5kvjD/Qn9o3UOUJsl7VNcbaeHmWXQKtEf9eKLoep/eMs/a\nf3sEwcBPwqXKTED0jPXaHmUlpnCux6gB7VB3El0z0RSa6174mIyzRE+cDTgw\nYQq1FLcU/6SqpKOLCpQhGU+eCZDAEeDUEKOSytmyU1Utybufmh3walaplTX2\nzvmMG3tQ0K4NxDg6ZW7WUb8EZbAMqa5MTrXZn9x5cwA3+HLS/jAp20JDGaUP\niG7XDLRCcycWSiiSXtHO2r3fcbILaPbsgQwr/2pMbBosbfrrfyerVGTHJ+l1\nUevaMkjGDibcYxoTLNZthere/n5uqPyO94vLgrUxoNKierPwO3YeMvuLb5Gf\ncH46\r\n=NOwW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE5GqM3/xDvQLk6ti+PcwqvQL0ueOPkoqOu593K+/ubDAiBpiBv/r1Nq/UM/9lmdTdv4mMZxjcTPAFswWhQCCjXqEQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.fd970958.0_1593646421476_0.7156674501924993"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.fd44be19.0","@material/top-app-bar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-EYstfm1fAJXVVsyq7Zx3hfidrFtQD6iCAYMZfZNcXiQERfasCe1MBqItR/2nN5GBLxYdyt28cyW2WSzjO9nyfg==","shasum":"ecd4bd5f0f6f55bc61b0a8e4bf9533e600fad5ff","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.fd44be19.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XU/CRA9TVsSAnZWagAA3lgP+wZjNugdpsH9T5LAHPu/\nZfBfEPvETG1D/h5ky5/SzQOqzy+TwK3XUJFHpydIgYV7YvaFsHjyGk1gjTh6\nV6CK7TuwLbr5MmcobDL758lvm4c1jxHrHCHCX1n1zukTfEF7wqQ3ymJbC3xk\no6o3JJ+FK2XNlOxo9wWvmFg6nf7JVimFAXeS94MGkSPTzuyNmjTP10l1rOdk\nTkqEgIFvpr28LjKMjqLv5O7jxCaziHVdhYL+31EDuBpleSdtQDfkBjxjjKlG\nZ/o9U0C6kUFtiX31h/wqkR5bX2XZnZ+wMBA+mINZC/quJoPrS50w9LyPAt9o\n8EObG8h3ug1lnePgR7/oC2Fv588G3/T7S+BqGbxmJmsq4F564QIzVEBiZhh/\noYKrzozaIRFXZkKHDdohtAuDsz7Yf7PKxIs2qXraLBiYQKxAfIDoD6wOCC6K\nwwicCybCliQcgeXDcMwYoKqTp+ymLzLbAST4bRK1qf1Z0ObxBtCKjWp+jHKu\n5HMYVa5IS0hk01zvITv+mZnd9jDK8gnFwrzmsn2W+xNX/bQUTC7MBob/5krT\nwj0yLf9ZXDoqHhbJx3SuJrmj0UkKtxEvIHMZB3CuvWHLbvnGJQsaf/TlgltZ\nTZUw2P3jbOT+C/aBmyBwh4k+LELSr7ktzMb4VvaXbqFebN1W/iuo9cLdQh/I\njgJe\r\n=J/LS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3AWjkyTY9hFBDiTsKgT6xjlHCocoetoW/AJIeBPEsBQIgLB8uU8NIXtYEpnj+G4MRz+gaHwq1uf9/eYa4mKX26wk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.fd44be19.0_1593668926911_0.4085867406029744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"^0.17.2","@material/top-app-bar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.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-fixed@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-ZHzimd7Y/QE0CYRHqiprRIca1T5TsiqKeviWFUX4q+lMC/9eNvQEowwSK3y2HnFA9f7tLqW6GqzQPxS/HlZevA==","shasum":"a208334a00ecaffdfc60d99bd0668d8253b846f6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.17.2.tgz","fileCount":23,"unpackedSize":70959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XeECRA9TVsSAnZWagAA2MMQAJwY31qY1FcmO9fyIPeR\nAS3N1fm7sEn5ki9gzv/0HyIXRyMJzymbZ9UoNpyDlUQoCkZyny+oIblGlkZL\ncg1ISOUJA79EVTGTrT7HSB70KIUkKngEcqPto81AxL85uIk4Iimiarf2Igj9\nCzehQIPHCA+TyQ2KvOuUBYklJM01TdDruwTFgOfObh+JsveZgdukbIbdIorQ\nrtvFCjaJ8Tc2kdqfmRbNn+LaJMO3V3H2M55DlUc8Q9kwFZDi5dXOsfuyRgfY\neTpb88xBU7iEs9F8eOyPwhPexnf8/t/3PpRyTDgLknjat7lsiCCoJXoOiqZH\nuEhpsVU/PLRAGmKoPSHMi8DSBKzcBZWXFPtesGeLg1ec+GJy/H/AyCdIuo+Y\n6/po4VHiMoTGTnksZVOyCdAR9sZ8qT51IJ1f+Yz5yFvfm0o1UgNtqLrXYH6P\niM33L6tzyGztExf+rMItsH4+KolQOQZ2lDOUGhbeXBMrCtyfruNEWqALAJQI\nUTS1WAacShHjROktozbW8P1dqXAz+vwlwVnzg/DLuVXxbj9AOM94wvxGV8PF\nzPTtfZIVOm6xvwK98b3zHEQo98klwV5l8+WsCHO6nkcFBBzA3avwWmeVMgRX\n6FYACHOHnAhSk6EI7TwefWNvoWE7JsxQ/6jyzY/q17x98OqTiQyx+Qbt8HlA\notAY\r\n=93gw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH91Elebsfs6+gbEYch1QfA+RLRf2hGh6xoYerUP70z8AiAWLr4oii8ccM6tFfEYFC5lTIiiWvZa9TmipFeeuP1W0w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@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-fixed_0.17.2_1593669507723_0.8047600757878088"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.ca6fc6de.0","@material/top-app-bar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-lX/SbaCtAWlAkQZR1KbQ6AUspP66pIuH29HuwgFKqibcrH/2AcpDaL8HSsXeqLBjSe9p4gjc5l3w1zlKXAsVtA==","shasum":"09a01cced558e044854e768e4b8c465e69011b6a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.ca6fc6de.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XfJCRA9TVsSAnZWagAABegQAJFqcPSt7bHjvyoiTu8q\n0W7tOIOh9KadAqpBYb4uQZYYcRbC4KjnyDFzoseGvExdUAuwTsV7CsnlTeMM\ntXFPEXy8VwMboDaa68Uq0sVHeRV2evNNR3OTkLq9KFwC3lJPazcJARyFfL/I\nVaTCoY/qu8C1yfFr2jitIhSpsv3fLDrZB5jao5aCEZU8N2Gqrza9ZqYNDXO5\n81YxE4KWAu5Iyf0t+eTMSIPmwR+XzoN4Nfi8XBmS+DHMLNADhpmMYdZ3Oj/Y\nIrcbHOqF6SMjybSfLnkzrxXoskUwgIvkq8Kp+8YeJlTtNKxrQyDnEHU2svkX\nHN5FoI/Qahplx4HBvekQz9TqmbAIN81Aq4xcsR/qWJoPgQCj6WJaOMcloJ/q\n/3pQH9aox7FCQLxxaHcS0+TStMPpjhT9xzdH7yLIkTOgbEgH/kxv5LZCMp0V\nchjL7ufHU/NE/zxuLXi10/7TvWVKR/KuFR3iRuq50RBaGKZKtVbiCIUHWw4o\n4lPs7UWqpAzLjuZQh/m6CUZF61IUlNtXvoag1OYluRzEsIUaMtDfvoNjJeX7\nZOGVO2KDJCTSziyufGOkwLvBG1Di1kw/B9TLg8XiXcB8zQ5VjmrvJdwQbIZO\ngkDKCN8gqvDXzcOqXi7WcDW3KBZ96iHQ3dmzur3UJHwO4PGJBtw5eITU8I2M\nfYBL\r\n=TMSi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0iFq4Ws3saWWTrgYPcyh6UOmCeuNBi3kpcadrnPOHmgIgJvFq/6KmCazi+oQ+u8X+Mtp8c4k9cB3wqpC4bdUI/jA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.ca6fc6de.0_1593669576692_0.9091547970984728"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.79f1ec2a.0","@material/top-app-bar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-r++w5zE6VqfSIX0anjcXAIi32nMXCmADruljnRAU0ccDXpq9Cp98ZHCpK1rpFR5wamefs9UpRUjVLY04/UDXTQ==","shasum":"781c8e86f8dbc48d255af4d1a57017e1b15d3d59","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.79f1ec2a.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLHECRA9TVsSAnZWagAAKjUP/3cZcU+JNt+4rTzEMbi4\n3JurfYCSRygMkTSwPRSsCxp5nCx9lKrDaZm3fXllkcnTiXJJdTDTdX61DxUE\niRy/1NpUAHdM1kaz0dE9oYO44SYAJvlCLMt2v8CxvsJd8a7RD4jy7Gi63DEk\n5ERL+FTmvBo8KQOII9aBRHESmmwyO4cmadUVhpDeWHkslemC/w0NvWMcMGgm\nUMzClvMcv7Q1AA50zcPIoGe9PlsPSljJE8r1ayU92gUm0o1nFDN+DTz4FCO8\ntzzoj5GxHW3ayclk4gsuEPpUHxWSDhXBUI5WQVhoWmgkaXVkdzvzoZuE94rl\ngKe6Z4kb2PF3h8LidBXO2dLzTwI2y+4mztxvBtTDTBK0AV2s7aDK8RnuiQ6h\n0w4hnvxhK2rVKSA3niIoDfIC44wYsqmcRdQaBbBIhuxpwin6umj3OakyLZ+n\n9210n1AbeNnx1PSWD4wSrTb89PrnbTp/R0fhNX5TxJ/j4R/D9Z5/8vA474hx\nPr7gkgQdeecKw/5wATuVK5TWeNuwXK97Np0x70aSi1h1cm3mn8m+siRqcqHO\ngLlK2XQtWgkbcRPHDMih/gQYeoUndvmiHP7iMa5ekQGNe1Ci61KJNFcnROgw\nitVGjNQ8MA3iFm6N4j9sUK9d5LnamYJ57A38YJjLMKOFjpqpAje9hZGjuyo+\nu9IE\r\n=kvYs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFwiXWtaZFSZ6n45rUe7d2L8lnI0lrf46sbIuRnFCktDAiEAi6fbRzmg7y86/HwOpqvsboPQT7AohCS+wXrabbtRtHg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.79f1ec2a.0_1594143171703_0.41545694145164935"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.a7bc45ae.0","@material/top-app-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | 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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-IKD7CKg299yMqOnidZ5cZrTMgmXfB06c2gTgM3nXRDx7+McDGKsE0WwYzIutF1FReMf/D+siiVO4oyhbtbo3xA==","shasum":"d44c9028bcadf9a5ecec334cfa6ed7927a71c196","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.a7bc45ae.0.tgz","fileCount":11,"unpackedSize":29474,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1KTCRA9TVsSAnZWagAAhJsP+gI29ZXszGLuUx+j5eq9\nG1eFVhzR1P0MHEL1k61iMoR91xQsPYOjqrtgJKMj+4BJQjCSansr0jD/7pct\ntRiwY/bGNIHNnqlxKQOs81TwGFwyf60cuuOcuBkEQWtNh4Z37pXCKU6YAeqw\nspXkg0qbkno9KbtvRuBp721auDbEZ7AtUTdQaKXz704VA/7nzd3rtQCKYq2N\nzpTRYWFKKeSOtZPhufrMzz10WohROFq74WQinUPxzWgi+sSA4bLXICkS9KVO\nf9QSEUNAI1WuMSXngbP6KbJVsKoFd3/8fdDN5sZE4fxIfNGdNFhbfaqW+6Ef\nIqVjrzlSSPdP321Maekzi0qidMsYIrspH8hj7ETiFFcZaCeRbsQP1p6qhAoK\n3yVBSG84xh2a65ktxrwJj6TSkvbTn8UR7pSh+r2LBa1NXGHjOzo7XaQXla/b\n2lfUpTPCLPRyiw6dVLZB48QIkf/vOsP4WS2L3sDndHhbEubpzfqh/J5y5U+A\nNbFkeqgprO2CkfsUqCiIdMaLQSqWFRYL8Mgp6JE4cQdh+RGIEf7BdI83Hbua\n9S/BTMSZWWRAnT8QFoEsnewjlXhUCGVH4lfqcrUaYYUqnf5UHs9Q1wJcrrpu\nsrj90evu707InjnNpwQXLI+iwn9hG7u2t5LHBVa7A1w4wgXxzkqwQRW4Pfhl\nMhFZ\r\n=x7rG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCh2kc+Ne9OMS6KoJSg0CqYRHXhdk7TvcOXEP75PmCcyQIgaOwb1XHGQqkXNgvWKhGKmqwWOB9fd++CUld2eJdlq+k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.a7bc45ae.0_1594315411262_0.5542215107484285"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.b184bc1c.0","@material/top-app-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-WhXAUPaGq1kFGUfiapSb8OMXb/nnWZSOsW9fWeLJX2U/VPNin5aTQUEHTF6ub5RbdYb6CZZk5iq6JakTG0JpVw==","shasum":"51bf722659af551371cdbccdb0827f6798a69a4d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.b184bc1c.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1S7CRA9TVsSAnZWagAAn7AP/0VEaEC6zzDyat23tx/e\nc79uqAjexXmj0HSsZiZ1GoLeHHq1PxEy84m8LNUjx5c2FHeLkyLe2+0AsR8C\nyvb7fZL+jp/kpa5Zpu/Ft+z8yvPRDoHVh0D+cyf0NqFC9OkQHRMFLVbfkgdR\nvhBZubvcGnmuTBFONT1MpMfz6vR8TpNohOt0XBORWnIfrm+hbuRZ0mBLPKcn\nb6zHIp1eTobZjeTojfmour42+aXwQsM8hIvqHfNSYC+XsrZiNKLYS2XXdjAp\ngV0SpUmro/WvUGZEftOw4yu89a07nKiqXkYXL/hZOPP7k2ItLP4kUBw4v6Q8\n+tKbIO7DL3Du03runjO2Ac6zS3XueIH5uLVZBkrcAkShLAU79UEptbdoKoah\naiuJjvmGaM1zdbCVN+ZKjNTRJ+5okMdZSrBdSHffo4UHTyP7IJA3yBwGbEUX\n7K/oEgccwm7K9XJ9MetunLwJ4dTi4hu0N07gMUwxB4XE+vkjSXpRKfh38roJ\nKarxDQS4zyn7UT++qCY09MlR6XsSk9Uudfb4xAvH5S3PkUVkswe+qzBggWfk\nxoc4KdWd7RmiPy2eIA70gctjt6XRPDEqB1eTiF+YqR2m4F7zoZfTJYca/z9i\nuqjFzxfrVoxFrZiyRHrxwfgInQI3U1y0VFnVCV7kVQLmMxKoRleHluxQW1zL\nvn1a\r\n=PnD8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDi1FmpDPu5SG8IKlhWJ7S2pnwABOj7zwptWyttaMlT6AiEAm8vO9PU+7GfY0hbjWbqCQP33+TrVJ+M98LhTWQmPYqs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.b184bc1c.0_1594315963476_0.8492565790369866"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.b39fde62.0","@material/top-app-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-LXBGxXNoBTMASGOGvHRjpHfYPjEnaStE/VkZi1fpDfxG/VprqFb4NyWTKvSrgG+NybtmnQ/Ri+ZXPROb13XF7g==","shasum":"4cf696325903afdfe3db666fd19103d849239dae","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.b39fde62.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1XxCRA9TVsSAnZWagAAJw8P/0DUFeaxwr/gFuo2jdE9\nWRmHZplc0bPsTlswlqfsvVVapf3uZeQKqjyUC9Br5MslCZV37iE/7bVF5AZc\nQmwxHMUqUYbhEYe0Y8f1hKkNITUiwfIl60uPFAVCDMa5JClH3lKpeIHJGG8O\nrt+c4qPf4AdH4rkUSfTeM00KOB79w/vk2jZFSjIiniPmMh90/CMWMfmzLyi/\nKH5Ui6WBbAiGhuDUQaXUlMj5ni8DmUIDqGLF9pVPSHrYP04sDP/pYSpYNHVE\n5b/pv+HdCd7RCG0H3K/YNgnh9sDwFWjICfY2iRb+QH/IDkBaxl5zZjclNhlg\n+lkDPLpvrMijm0TOLNblBt5K9yrhQmig/obMdl/az/kpke4+whaOCZP1zHZV\nVBSHm72/QXoXdiUb2cvT4yiTXZ+7gmrBCTc5KG7y7XVXU2vGauqC8HcuPLWS\nQ7pmj9iW1X4GcFb1iHNWkmbUuoClIGP4ybAhbgUBjv9RinS9U2Qx4tWa7Q9o\n/vFnf9Kqlu39F924a67gACjhEhTZzED605RnoJ23mxmx6PPJQN8sP6LVs9Tq\nZP7BMiVFsb2y5sQySx6BwyaxQIQfk34Clp+XdtnkeMXzbT889aqiH0vGFnv1\ndq9PG+DlxOojeDXYeJck56oHwf95SenpIFfY2nAw2pmIqogI7Cxwx5AtK23j\nXvzC\r\n=3p3A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFgKj66crPVsauyTefhXAVvmp5fiSN6azgYVbBgWFKquAiAuca2dhGyTJSBB+8p247nmXZ0wlIqig9ydXdUH6lpuuA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.b39fde62.0_1594316273484_0.7273013250071718"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.dfdd8d6c.0","@material/top-app-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-xg0j67ueQ6R660rQcRE7oI+1fp2pLRk+oS0wzf4yi3GDPMQtncBpi/eMJYsA4Inq4Hiz66I/KVAe+clRI1gHlA==","shasum":"cf733b819005586c30e9a8eab6f0759e44b733ad","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2E4CRA9TVsSAnZWagAAM6IP/3WQ808+/8tJblOWWVBD\nlFsCnDNqlMrZhcQSE5JNzFpNZrceyfi3hsdcjdPXP+E6MpR9R6ePYsVjaG5Y\noqiPUh4MWlqh3qgrH1upc9Ynt+E49bxYqJ4epbHfrwEAAIitCJT6klEw7TaI\nO/Gn/GM8fKXmdRrTGKrH/NlMTV8vSBKYL0xnyAOaZk8rtpuoOwMCQADAdLOH\nam+jVzujLMXMp7CdGa4/X7Twvkie2+mO3kjU0AUg3K76x2dVtJK+QC9+uADN\nhr5X8D6oBSebEFpGAMauOxbr8Ja4aTWIYGYMGLHdGGSGF/f/N256pPVh5yMR\n78F6pVGg6QZv8kr80RAs9/etxk758oYfdoDvKIXzFVEyvmDMrwUaj6Iul7PN\n/nxoo3S9PM+fCJygrD5BxdCd7AM3JZIULPScMQNBOIm+eGkEewxZU2C/kre4\nYrN1Q8f5aOFPeWWdwDogW83zVJSFFUJtIjg2li+CjNzXfW99NQiSISGd3FZr\nGRIG5qzEhdKBr/gEu0dJB1xMLwvgD+FXLtRA1xVQSuvT8B0fetj1jyVLp4tk\nk7SDMSF2ZZRiXfxMhHGOEUPhulu5w/TZz+2RMhR43vUVg1zKw+4HVfjbW5Jz\nQ0U1weVkbuzgY2DDC6m9V6MI18wN5OsW7u0M4nsenhv9yALEdtGh5W5gjH6u\nUb0B\r\n=83T+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDJVWEK94YJ0+CxAiPDHKV+xUJiLQNX7c6cbFX4S0pgQAiBI9Nc7v3qFnlVtLAWwIX/O1CWs9cDDx4AK5O4znaihQQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.dfdd8d6c.0_1594319160241_0.23955719128398756"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.11cf2694.0","@material/top-app-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-BveLYP/lYzGHM8gLSzOjEj1APwLV0ANfWgcvHJ7kuRFoeSU867ZcymVAd8GPC/or1yKsLZmOUgwi6L/e1qKqug==","shasum":"dde467705a09435847c774da63718e669f7c0034","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.11cf2694.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4F/CRA9TVsSAnZWagAAKckP/jSgrg83oPgDAKqpxR9H\nr8JcKy/2GIe0UIEqT8M/ZJ6V6GyvDixfND+/FMR4yym1ZyWVKLljMVSs8pUq\nkfCcwSRLnlKs0cQwU/wDPiI8yKyCAsi1/pelLyJoG0vyw/lACzwfKT/zm++f\n4q4QyAoKDtTNHDyNCZsiRvFjLTeuNdXKKUlcqE0io4IhvssHOWPOUvq4PE7W\nF6rhBJb5c0PJO/kXQWsFDEqC4O6uoPrLO+O/GkXPTmyyE/qrfh/+o9O7To09\nRcI/03BBYSLCr2Oq2PpEuCBKVI4XrOpXray3ZKlKJk4FfDhzmbD+nVIciudz\nQl139U0nc2hUW0AJsqecN1hHVYadhJMaJNbLGMJsGfgAVicZN2yN4UmIwzdi\n+nCAKVU+k/WWLIQylZHfJRbY2TbfqzjT/p32pfCKJYzs8PsGwKs6bYKSz/wu\nxVr/+zIZxDOLdkKeYGdtN98dmYiRKJNfVP00QkTEz9VVIqkzMhNUFegVP7QA\nn+EqUxxBrQcb3pHbwD/GaoiKImNYj3odepzJ9E/owwQZ8IjRRUwY81LJmtEU\neG3nV2+HFALZA38Yccax6QxL7weyVZKfBJGfIE0bJKzFyUKKChhdG2HhLnp9\nFX4+ZPiIA+MmYxcFoFxukTISKqCoqv9E+JhLNJ+DpwhoFmZ9Zay094dSgN3l\n/rev\r\n=5exV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA0tkT9rv6hFwYuijXwnzriFm5RxXQTJWUjlbcBit5tMAiBeOPFQ65XuOkUKSKR4PlIlGcDLpIzgAd0fl3ZFIHNe9A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.11cf2694.0_1594327423348_0.3503727241587593"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.436d66e9.0","@material/top-app-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-itsFh9LVqQU6S8IBZrrJjxxiSSGbJXt//NQ+gOZUvMRbHElE+YLB2KfQjBYwcq8kEF+jFdyT2Q65NNyizga5jw==","shasum":"4e5959199f2393781a3260ed993a58596f7f379b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.436d66e9.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4KjCRA9TVsSAnZWagAAI8EQAJVlkQk1/9nnL+IxnUcj\nt0WxGq+NV8VkTGT4jxNDkwAoiSOeFH4sjOWJ+r3B2EEwewtrsuIZh3X4xlnv\nLuakmI3KB5ecuG52Gnb70SVYtAK66c45VG90B/2xQCuveUSCMuFATT4eZT/l\nSENR3/YSN+XZeHyzvp3M21WWJzgsQ5wGyFEp78h6X/SZ7qowog8r2mYhBsdo\nfeO5qOs6lDrMVsMVmIXXE8fzim7jeR19Gw196t7qXhZ/tLR8rshHeFGlqLXa\nqLj+Pq2VTG0VAm1eqPKbE9zWAnEn3IGwcptM06pz0eFxOI5XRWLWuAj8Xloi\nS0vh6LoyvQBQTIP/3xiDg8b3zSeCerP1FIFe6mhlD3jgPxrG+TWRquyGhkvm\ncUO8KMsXGvgTVpca51s3MQezospKJlAf50uVm5/021jXq1/wYGVAvqQRkT9l\nQ6bqhS/p68x1pAoXNStl/3SUUm4d9L9rAtQtZsiYrngq7UXuTyCZtFruPebt\neiAGw1Gsc6k5Z9DqsjzRCPu0oohxqTvMOCya334eIU2xpjxf9QlrXKtquqHL\nREnEcJhVFnAQqi+026XofHlz7QI+HP/Q3zlm5ytjNMFAxvJkXNTQK0FOt2mI\nBBOI1W+15SYCtgkIYwHs/nXKF3Yhu3wD5stw4yc4oDjh4eJXj1VuqiZuhyGn\nh+on\r\n=6ShP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHx50cRmxIDkHu+4gnSQJ+RP0qmVXPbXd68n8nkEartqAiBc+jdTh0qqPG1N84iXF6N3KPLQjJNMU4nHZiHglKd8Aw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.436d66e9.0_1594327714511_0.32101781784102923"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.3a44d36b.0","@material/top-app-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-UPHPyRrP7cgF5T5WbB4Yntqn/7G5Hhr+89Yh5eGzqBEsDqGR9nY2LlIgvaELOoXO292V9N0OGAsNNiCWxkfavQ==","shasum":"b9696bea7ebb667affdfdbc03a0728cd0df8c509","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.3a44d36b.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7hSCRA9TVsSAnZWagAAdkwP/2X3QFGDCf3tZeBm+oV5\nibaSHmiieqV9t8WQPCUGx6jGVccLvm4xkPg5tFDASmBOamhDXRSCtJ6XAQ6V\ny34+YrbUUJh61bIsvPJ2YZ2pgcfPpKhEvh6QOlxucngM+19wZ1j8jv4ssCz0\n74lBZYM3WbyBu30WCYnnLemlghkoNlIJyjzckoPOsV/dniVBfw4MsmkAy5hs\naOkwMshddmUmRVxc5jssK/xOjn7VQfo52Df12nAO7Y1M2rzqrpKbnuo3On/w\nxKWJz5yqZa/+19gcNM6a3B2rupusvSFSnOY9+wSIypGhD6XMAMY7gpas7cuf\n1CEgG3GE2CHtaoAcS1OFX0w6XinOyQSIWgqtqgjMzK/Z0xYMWhQySt+xYq0S\nqYDnYZGVE25WqCq3Yvh8FlkN6Bj2bMeGcHLbKlK6hSSqrVAiS4xweGhzUdxm\n6JvjvSgyPoPHh8hITr0x/2oK6xT4ar9TbKz3e2Up2JgbJ9P3P11QsIuIeR+T\n5ZBc6GDccjeprZTuZsi7ZkgasRk05UZB4du6elvoK1F72xpLKPE9t8YjGhg8\nVaNq/I+gbZO25Or01r2jEluN3I/OvnFicB1hpqFDN5qcCH/eElp9WAP45EXg\n3w9UkEUgNjfhVJZNnHVKF2e7hyANGtrmblmyYpZ3rj3uybX5rJgDbLkzppmi\nwvXb\r\n=Lpxv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCKRDwcq2fB8fuU5DGb4JVyxTLZoe5CL513UDzZQeuM1AIgbuAxhh932ItfeqfkOmLdU0OaSeTB4gAw9PSQaWc9YP8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.3a44d36b.0_1594341457888_0.14556192405629176"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.ec11ae6e.0","@material/top-app-bar":"=8.0.0-canary.1e7cb6198.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-FXblBORRF+3lUpBUtCjFFd1LxJnET5Z3aQ0fflZLpbKLRSjMINaONfaN3FEIRiudR5k6I6RLybCBVKQkNRSRoQ==","shasum":"94b926fda8e6eb671c264985f8d14aed15db1f7c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.ec11ae6e.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKsQCRA9TVsSAnZWagAA9KQP/jjaYwogj4WLkikuxKKZ\nH6MKOsThSy59rsZFdCeTobwy9sCQJ0CpShEVjehsd58vdP8YfSZpDNrfdstT\na4KtE8nN1GggGXmTovDruyBZzXIuCUP1YpdkPx4mwGdjEzSvQ49YnKood4U3\nsIjMj1N1jRm6PQa6qu8a4X2KjO27wn22nIZXar52yiVJMi6UMA72WsRR3lQ6\n1vzOyTAJ50Vw05XRaR6uNawEBCfyMw37RzuWJWNCTVKGUXgHds7nlR+8ea79\n0xI8GO9diWF2LqSF0AWdOl+1fVDNtVvcKvTtjsn2KPuk+/WAg1xI9dmulL8O\nQMv5/RwDHyR/jvjSM6mIx6Gt9FFjIp4YDJGuDXsI4lqCF4nw6O2UsX0JWKZS\nzfMhSsJakukrddtmTqgsfzcqSdCJYJdAYcXLUArg/8Txz07nJnd9XgB2WFD8\nucOVsqaeatqmvlF0DzCKzRrJxeo1m97aDti5ZBTapsV+ZxGG2pOHmrBuAESQ\npoSykCqBqePyGzU60Wnew37wwVDIvQowLaeVlU+1FnIU7gF6+RNa9ZXf717A\nHqCzfozFBnXEYXFBfocsiDIl7JLlEuGNoVeDEmX3GAfSduqI3uMNI/DibT06\nc6/zYA2fWCmNiwwlBZ99/V/ySbuDzzSCNOgXI7W+a+eDpeTyzIU/tLeR/7a/\naI0o\r\n=QFoi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCd2dRDgDi4mBMXGfSnScCjm8Yd9yWiQcOmfKk732EhnwIhAN6ls0r4rX78nOk5q4yl5kJir0ngsnynQ3h5L3Maywyb"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.ec11ae6e.0_1594403600311_0.2037218841668338"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.17f6cf27.0","@material/top-app-bar":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-nOPaxBpnilvO34jlnmRDC6L9o/hhDPEzIbtQyOLHuBZlQES1Hcj9PROs/dkS5zt3Uj1/Zg50KB3WOu5UiUCz0Q==","shasum":"0f510a42502a60edb2d438ff03bbc2e8eb6d582e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.17f6cf27.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLRfCRA9TVsSAnZWagAA+QoP/jTWtUPnslIz8VzH3sWz\nLsh0QO/pUKIbK93OEDS9eYVOkDDN/Ha54ETokjcg05ZK1AbXFAjGy6bN11S7\n/aYA33z2BeoOVoK6x00Pto2jsEa6Zfb7NlFLsoB9tgYvCvisISYxDvbcXvdE\n6SnDsgMjn3qh5nkExYx4+zujJnIj/Ey1Ahu7kblaYrIbhjIvDy3BGw/eTcWI\nHst+L7TYLKNkvaapTipA699Vf0uqMd5aBDwH3IGTaZnZebuHimr9Py/ZMRqy\nzCOqqNbaUoVkHFVzV0xea/P/L5z6l18ht4jtwjX4LMpJlJnAFc3J1lJo+S1v\n5pUEfom321IW77oVCD2TYOZtjb3S7anWDwknlZCT0mbJm/hUulP9I+pTRfB4\n6rQ6HMCtlXgUzBCUUxzc0dyOX/ylTkQL8uwovK2L26n5j9OSFe7CrHzjA2AR\nahQyoZUnpTQ6Tv9MblNZr/++mV+jgd2M3klUyHvJ/URXU2BCyONYR2zuargh\nfL/ZG/qrv861XPLJO7frKV91wXlI9TPoaN/qG2JY4mCoVvgPTychiOmVvdgK\nYW7jz0/+TxkIdRnAvT3iAC4dL5+ZM56n8BGJlzdQz/kHNNgFW8i3dungudK8\nu3BhdRcN2rJftJjGZ9sDOTbuUPnat8rUw0rk/Iqyqlp1MMvPaSpXrJR3+aVC\nT8j3\r\n=MwUJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC5o0bo6zP0VnTzflyDAx+0asUPEiZX65YiH5mHz2MlaAiBCLWR1KIy7iHGaf6KjNPjUoVeVwNgtT96ke6tX3+C1Qg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.17f6cf27.0_1594405983409_0.2636933115919955"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.efdfbc21.0","@material/top-app-bar":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Cowr5JbOl69a84c0wYUsA7gzBKXGX6MwRuFkMQhTDU4m/qi4ahDVmScNSpJ+XtIj407GglJWaN1O4KhfId2hJg==","shasum":"29da1056e6201013c522bf3ff15e6987df7ed1b8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.efdfbc21.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLciCRA9TVsSAnZWagAApjEP/2ju4LWCuXzv8A8fwojr\nL6nnmi1kiamsSXBRV708QJAysezQrCI6QoYbRj+C9FJB/tLvYZWYHBrpbh/c\nt4CIcjD8AX5RyFBf2ZawqH+IHvzdQv/2Bhva4UGvRh5bQXdxbZm3LdFOhLQk\nDugE3//MOw6E9ggB0qfcuIPP7QzwBlTYUpHr/qok3XK8jq1RNfjUE/2v6ppa\n15tFofXHKXGhmKsVQqE01jyN91nzqfMap8RfIfUWdbeDghXG81i/ZA36BQDu\nMHVBPDdPNETzhh1TLPLwrJTUi+c6JrrTRwEmgqKUN8hM287wcjAGlvtIEOlN\nzada9ljcaCsCel9ahkzZYGVNnOCOLPCTHWOY4VMGYWYucJY/NOBHHPfcygYM\n6iqnGSfDx2RBGKQsWK+efXX5Da8C4+FqrMP+vS0tyjkchGSCEi3g/BR5C48F\np+HtYOD8isxPZYYhEYNcEZmCCZReoVuFWultEIrCrS/AWz3thq+HOrcoi786\nXU1aX4J88h8UeGrhLADtq+Hrk2leDQ3JpukO5mcbgtQVS69Ecg6cpPpoBt3/\nl2dcqN63aUiYxeDgaFB3N9pu4ht1mAEo+g4tKUCZI/5D+2sjKIDX+Eqe1dtB\nuFGpwb9uJUi0vgnyByakL+Y0NVjb+YFB++cbDH4hecx7utW2gBDWHXe/jdOq\nptFH\r\n=Mc94\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDrgy4+ICP5dplb1YpJnB9Tm9m2LXvZ0/mXLWYh33AV0AiEAwwpk6letF9W7emUAfNqh7YI69tM4AJPYe4J7NTiveXw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.efdfbc21.0_1594406689685_0.6431251415674326"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.bae4339a.0","@material/top-app-bar":"=8.0.0-canary.5dac1f624.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-eKlA9oJBYr9rVZF2J2jrCarHnKEllku6YsN7mYnRMIEwjRPARYAVNQIchp+S8TJ5vv2Io7M5ZPye0qOVb8APtw==","shasum":"5c0aaf8a4caf59713574b55ecd61360d44047ea2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.bae4339a.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeBlCRA9TVsSAnZWagAAnj8P/2S8n8RSZVYaaJfkboEb\nzRfzSyTtSgt2iu5JMb0dfRtKu7zMiKeYg4+yQgmCo7NN/2QJIXzw8NtwN+i/\nWHP3vFUC+x/uoRLgabj4CkCptNuMJU8Ejcpl/7WHY4h/MiDPh+U61Pa+xEe7\nrdWu77NgOsOs+wVC2TJzasVFaSsQ5Hb/Px7Q3JyUUOfTzUV2VM7Bzbdqlf9r\ngOpsp8ufXwbzFmoT0hzfTBR6Zqz031Z8ISuI3pmZYtT8xi2NCXnZug42SUFt\nDcL4HtR4PtXZyEcn3Ceo+aCKKpJT9kMXBfm9Uo+0f/UGeIAM70xF1GarVfFM\n9riYt9ZxZ0PIHKsocNm5MlsT2WK/JAessWAAH9OJzqb4jdsZj3zQkUOAyKnk\n+NG5nhH8eKLYkYawpXIR1QnQasFc+ixwSGpYrfY/BnZyP4G0k90kgjnkKgpG\npPMjlBn1sxQD/ZC4rYilKev4mWiopPLA8XJZ1Z3fCA+viGRpr9AsNubpV0HS\nBR0EtAGJ8jUO9qsfbAHyxc9dJHDLwjgHGHSBAdWohuxjHi1VyYlxEa0CDJYa\ncq6eW656V4V5meb+5JqlM3DckAicXoY9ESitsEd04q37GuQ3gS4fyF8+IaBb\nVZMKVnUl7wIz9ELJ2N+y4YwEowrYUSPiukDEcwamkvr6wZvyfb7QbMQTIkdZ\nd6JY\r\n=kncz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDsqSImqVRKwMlEo/gKc1UxXSemK7H2ujVaihkEQmbrwIhAIG8mB2lWDmfZvCzUPjF+/dwIaX3/8v8YKSqlP8gJv9f"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.bae4339a.0_1594744933248_0.600256946564421"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.28eac13b.0","@material/top-app-bar":"=8.0.0-canary.e6e23019d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-WNsN8dS8I7X3Z+CC4zosa37UbRuFHyyiDLRrg8BlNHCcwkmJAISHXu0o/1vWG7us2IK0NNXLB0w1JIfOsUZMZg==","shasum":"f2c98552b8b8d9a02888e1ec9a7acacce80df956","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.28eac13b.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjBsCRA9TVsSAnZWagAASEsP/0gvtIfFjgG012dpQYkh\nlJoWiNsU/hhnsMreHPKPvB9+YIOHrYrKOV2w9nhI+8Qs/IL6W412bxWc9dri\nhy4EuzMrC7CwLxSe3+suWJdmogHFV7Oidb3H4vg8WOjibMJFBp1TN8SAqwXb\nOIyoDyZMo/xNkpm6I2NAQi6fPlKDhmhFzPGCjGhiVwDyikW43HJb7B7OA1D5\nbyOS2ncAPN4l9lAl3LMW8yFoB4mWxu13Hz12p8BtJgLdxdTEN+Ck3nPp21k+\nS5Rln5W+bQBH/2Uv2fspqOKnSVrtlIZJLvHR1d3mVNHVCbxuKfjj27Mpg9wF\npcfOUaUpRArKGeKbbgjCTOievFd7HuVA/M8bmD7WOf6mL2lWOX7TjWl1KBhs\n5laHL8HIUQ1DsNpuu57qEQ4aPkocpfRn6G4AcfxRWiX3UyqZJCtCgNg5n9be\nvgdWUSXvl8BujzBxipuY7F9jpdoX9LJpBgWWB31Xlysl01v53rMsBN0ij2Ls\nM1Bm1AAA5NLrn9lowx0QPhUedgRpCgvMam3DGEMfmNJNAwExge/Hual8IoQV\nPtzMNhfbPRzJs4BC/z8py7msUke6efzAOaoCxiiIYtyoE3xZiJPkFUgirpLE\nrYBh7VEznAhPhGS1E2jf/5pQjuW2oErjmZqRCicEjQLV/78em1wx/Ag+KK2K\nwdcv\r\n=5MtT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFDY2xHKZijLktU5luK/ebleINzqcotjQXrK7nujhPhtAiBBjF+6tDZDJwaqfL4/RAL0UdaO8Nmjd/vJKrosAx3DcA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.28eac13b.0_1594765419689_0.6420314119672037"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.44966b65.0","@material/top-app-bar":"=8.0.0-canary.ad4df58c1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6r8mACgjuTzQX5ACAEQasRrN6g99aFwFxwlKQptX3NmvCbuPD5TUBL/FxGxeH0YacCf2TZ5kGe/vloaolfiOnQ==","shasum":"776857af27719bc0abf7eb81578e038bf188c61b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.44966b65.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0VcCRA9TVsSAnZWagAA/UEQAIL2h/jyXVV110wM3+xy\nKIGxTtCqnZ54sjRu1X0ZMysK0EZiml99UXqthH4Xa7Fm6mNGmeJP7Pb5CFhW\n4y/RH1VyVjUYchbuqU16WLj1/eQ3TBxHmiRGYwgvRDcDkw2heJSss3CfChA4\nwxxQk3uEo8Hpv3PSNIqZBWbfQHnwJioyR2XxkW+QFJskG78MPMBCaMsyy/HT\n/FvcHIZMFQp5DZDXNgYMeOzjCHDIGVc7NhtkmXDp8OLqG0DMm3ed8bfQk0kS\nPq9tgFlO/Iao/XwBIm4hzjeTAgGL0WGzqWbeQnE54PzyP8tu+EAXH7QXSEvM\n91bbhYBuQwXynETQNSrjwsj+ZQv5NTwM7Q8BQStpZVypoHjrwo9lYIsmaN8Q\nIjbz+m5AENNaRVIDz/f4a8w5ImHOU3+2p5HuCuojiLpuQsZXZgj8KMb5SQ+s\nnFi2nKZ7Zza5QPNukMOKy8GlsaoRuxCJockqlkcOkyb9k5w4mlkL15sCFP50\ncZzlCu1sA8hqbO2EKjt/GwZONnYWI09BXaSx/JUkidjyYUk+WYdNOJLUmGRs\nw3gjx+X7qc2apFA1O6eokdy2AmbJTqflN1oE1mL5Mw+VElnfTrv8UlOhhCnS\nLdN1UPHHieVPi3bZzPtE55GZS4w3BZ0OufV2QUHFlYsFB1fLhdekYrYYvlOS\nOAOi\r\n=ewwe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDT9/xgA8Vt9KoaYDR85BUWf1yLgR681yOLIWmN6XLD0gIhAOOY3eS6TuWVnkgdf3dhhJ/Dx12nqVvkitxeI9EdWZBJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.44966b65.0_1594836315678_0.5360482075072597"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.3ef0ef60.0","@material/top-app-bar":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-9w8av2Y8grR6QKYga8eeqiJH2pT+uqsI41hegQ8sXPWWJgsirz/Gdny7vlQwGQ0eZ8AWfe0ZPDp6h2cVvIBMDw==","shasum":"820315ae99446006545a4216f046dd6801e36856","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.3ef0ef60.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIZjCRA9TVsSAnZWagAAE80P/0Cug+VDgs4YoNozIM76\nK+bd9fw73HGnD+p7e9WRI6MX6MSZi6pcvrl2wLgRUm6/ygabcHRx453yJZO4\nLrzuO068E3rBF3lKbhIomBD2Vk6n9W0YZVYMcPRStpHdjS0uytQzQQl+5ygf\n+YhqbqNz08f7iLJXv094yecltLK88D1QFa5+s2QR/AVbC4EFccaMHCERx2s3\nFaiMyq4mAf+dbh607Ume0Ta+m7L+xQmW3AeuurspYbgszNKlsdbx9E4FRTmi\neY7Gr1BugcLHDFy9fCa0KOyB7L7OUg5E6LeJ1or5R3gzA4v4+vWv/q7l/TJU\n6XdP2S80vkR2ar3mg9jI3XRx92EzSj+G5Km+TWv5r/wQbmeQEVohIfMOXAan\nSLSorIVSOIHwwdDnKcUDqPKJWjr8leOEMuW//st5OS0gsnNBQC2QeYCKba/w\n7zhjo5uDiqbLy2lyIEqnuEunq43zMKLprkwi2NB3OZTCHlLzEkrxS8u4S8oZ\n+vKJ0+egWfB816EfflttYaP3vDdSi939v/yhnYDuuAeojOtFR5eZJz/Y4IMA\njNfOjnTbuNx7NpxQ/Cx+rAtgsrCy03NXgFliHF9RK1X1w3he69PNps7mPCwP\n3QXp6PeDrqQ3GFw3ykbNSC4eOioNMaqjb0lSlh7pu5IpwCf9XnoqknUk5KCI\n+XAA\r\n=k1AB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBD10Y+glcF972MXhjVqEYWc/0KIz5dcGTp1T/X1WD9VAiBs8b8G1E5XaWCvMk1IJHAvq1pt+Dt9eHu7fnfi1F4zmA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.3ef0ef60.0_1594918499282_0.6612321140572606"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.fcebf9e6.0","@material/top-app-bar":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ng714fRqCW1GoBBAgk312rZvwxKX2oGw7JmG7ssT/IimIYf+ZUMdksxoCuwJyyC3hSDBaNr6KRHiX9ghXWZcaw==","shasum":"fae68ad1c76d0daa76898cf21377f86c3d6b3c8e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.fcebf9e6.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeZ6CRA9TVsSAnZWagAAXi8P/AnZYSlWDqKlo6pF3X0L\nrp6T5ooY+Emg9pCtk56SmpHZrzjXR45F2caih2tcKDIEu51jghLynxy81IlA\neDmkOoD4pZvCUaz78lOlDyV1dUfVZ3IPjf/tp2hlkMZOvPWAgHGHh+REufXp\nLRGFBysKhq3OXyVedOy20fEI/AKEcWinKEe2qpvZDXFxtw2BXtst+NE82yMS\nlEGI2tuibT2gdtFxKrDgdvZ7aPfWz6olXP2WnSgFW7KBjQHXx+hejNhwTQ0L\nsoXAdz0uwoGhEhWYxjayGVTAfL6oDQU2aCPUjjvAN/5YDzIb9DvCYf9Nhg49\nVRmISlm1ZwmFbJqFJuCdkIuKOH+beApW+iPlQBfNHuko2VSDkRCbWwCxqNYR\nx7S5ejAmKtg0hWzASUVSmLsPpIJbgVRPxtb+jfJx85KwNu++9vkpnyEbsfMS\nHDPgR0OIJ67kIZOoHDgYamigbVYqJY58fTW4us41lzzSQ+PAbwCagQFACBeW\nGk8PXfcNWtRihKmfe6hw0bBMd3i2WBtK9YU+Iu+tswVwhYK3uRbxBACB9vpC\nVE5jv4Ceaco8YJSOaTZccZ9722DagAMTsDoxcgriPTLJFVb4Bk3slYdinMho\n8AGB1qt1TgoTdXtS/PLtoasZaVOSaqIDjzPBkuhRLqjMXdovLfI1oAGK0LW4\nb2y/\r\n=JFq4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICMHxsbUt9shnyFJujMC9G2qdpgNJx+bk7k1Dbzyyz3kAiEAy4V/FiAsFfftcnnV5F4it5T/OFvaJ2yuBVrir0/v7Zw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.fcebf9e6.0_1595270778140_0.21605920076340301"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.b6a772df.0","@material/top-app-bar":"=8.0.0-canary.fb5a4cdeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-zM7/MVJmnRv74hFwkWZ4VFZ42dtT851E0APGcQ0lGU/JNFq4d2O2P8lPTgkKUHhfJF2tuFT2ea9P19JzCpG9Ag==","shasum":"9a5e80e0ff0dca7719dbd0ff2d43525aedcce728","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.b6a772df.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh7dCRA9TVsSAnZWagAAJIMP/1U/IIRhHMSKCo7d4XNv\n/v+GBcAE3pSA+biQqrokyPhoOQgDuW3DF0fVf2IrgO5SZW4oxOYBGFqjo11T\n+MfYfYezw493qEbm9n//OH2yoAXVM4jCtFacXhc8NR5PPEVcOvR3P6vK2UkW\npxd1r5poOCUb3put+YBBSBl2iIWDq05dmemJUXS6e5ktFdm1Mg2PWpD7WHzU\nu5/ujEAsEwekABu+ZU0V3gqNECQFwcy23Dxrii5KeP59vpZ9Wy+4NcwSdtGP\nZnl9jyie4G2gkBMoGKAnKCUx9wYyeHwkklLRoKKtpu2Vb0lHZek7GBplXFzq\nkROqPlkXmLZLJvHMEKEYsb7N9+BG8ceEblSLKdSSRJf8ZL2kR8deX9mxZCfb\nw0dqTzNCzKhRJf6py0QHWDNngA88aDniVFMiGxtXoPoTCLHhsspLGLHVvvBl\nt8+LwlVfRLWc9Ftj8WRwWvrJ8Jcx3ijeFHX/Q7CiH8az53nTAfcgYemFgIY5\n0bHXlsCCIXdh6SXK7aLQMX82OzQ6A2uYveDtQ+R0QMg/sIeyC9qij4t/rcw2\njxRTwMp+muZC1Og110KVaA/fqxxmukdsjnfL1aYriiEsmGMYAFiaaauns7Gi\nFr+CpVnL36MXRig2oheEvRknS/sF4BZ9H4m8GvwxB+O5ChRTnIBsLCqjcIS9\ncpdw\r\n=Rat0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHsthAYJPly8Z1E5hTCN3NJOzEWgShoxaUMkppa5MrjsAiAlM2CNVcRKEOhPJqZGbz8qZCGXU0ozlShoNQzmnlxKkw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.b6a772df.0_1595285212706_0.17630810114336692"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.f6a6ca38.0","@material/top-app-bar":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-UkelaAS60Ixe4bj6K/vCc8nRACDWrED1LdfFvhYlg99mSiX9bBe4PD2DngyTevwXZDXejJxfRdOL1FKnn5WJ1g==","shasum":"19251b546ec99e156d6ecc8792ec945070006e91","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.f6a6ca38.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxqiCRA9TVsSAnZWagAAPYEP/AkVgY5CPbZcXTkOcKsT\nFj7e/AcYpkPR/pD0yEmEaBgoLKoySXGNe0Ij+NZYksAL1bBtWqnLi9Pi58k3\nz/Te71XBj9qxZ/MMRNTZA2uIcQ7G0vK56Pk8IKgCKNk8pni4bNxhloWtXfiU\nAs1Laei826D4P1OfawfpgMPWtplyW9qBnVHU7CmP5IKGJXIfmsFCGRicJqy4\nwlEHSza9smwyFfuF0hUIyDu2ataLXWRhMifvg7DKMGLB3oiKVaNEdhoUKOL+\n3UJw20GHd76Q9jAGrjWMXyYse3b4kpy9aILdpkwJIqb3a9HJAN9VXw7c4aYB\nuU4s6Ffosh3TfQzlSmAtT1mITnXgLM6uI96T9aWLJ5RAH1vZZ5PjTkQlfWFy\n0hg3ToD36sfIM52fnRYti3mcuWXfBDu0NpkM43/KThzGGuXmtg8FRz7J58ha\nE8lB/sf7dCvlFYD2DSsPfXm0XbSMT9923CmItdYlOZYW9s5n90xgsTKyToHk\n48zMmJZXF7RHuG66ev80HGNtXRoYwiZEjWEDXcrvaSC5qI+3Xv/MQBM8+wtp\nf71K8lDvfV5g94O2TqgvGTD963PII4lIfYYA7ej40GPncHP/xjLhA6seSuSc\nLGxjoiACcyJK0yTbCGl5Q2+ZjYbUUaZtZJKRJzA/lJ4QdQtfVmQo6W9vfQJf\nRqt2\r\n=hSMl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2deJW7qWO9p1mSKAPKRoWh1NEDFtksXsTDS35yCPeAgIhAMnGiS9WJ+uqMpc8V/t0PC57aKSedHiWtd70pHaH69ag"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.f6a6ca38.0_1595349665780_0.749404463076264"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.647dd6b7.0","@material/top-app-bar":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ERN4CCbmMdISKhIVO2DKIOrdBfY0ls5NPRILotR3zMPXqoIA6tllrAXL0xO8JdF1VdWffVwtF0cdZaJa1gPF8A==","shasum":"67f93cbd6a17bb8f15f95352bcaa529de26b0072","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.647dd6b7.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzd9CRA9TVsSAnZWagAAE84P/3XvBG8Th0p5acOcwN18\nhtbvPG/4Da8+gdWgOLj6dfYBRd9vL8z7s+mq47vNL1MNwakbuQpRySd/sN3i\n0CeK6KUDodiuuhuZHTsTYCeh9sZKk7JRrM4zTAEXOYyrNVpLGcfSAdoqkuyM\nSzzWNSsCGz8L5qPKlEe3wKXLK0MeDTHA4MNoti61OuqTqWak4S4z2U0E0BSO\n+FaAa2+sSxM1EzP+Bvdr3RS+0XIekyuLeCZHW6AROmczdgqCobxluHz1C7UU\n6Kf3lPT04Iewe2pNv6swJqo6ReLLjBlZJJIqQ4LWdziRPzYpg3QA5rU4Amg8\nKKbpG1S7JBuud8oq7TEVSIy6WXJcRGWm5YQLmjfDAq36kS4uVTt3cjmShjXT\nbLl4aInXdCjsONqzZYBrk1z1f4GCYGyUbtjr4pUSUNo/30TAknDeD6H7pPjm\nyLuT18aIKP3FlvsCg7Rhb3Jzj3kfyWiNdU5+7hCAFVNsTUlc0H9ERRoOei3V\nXGmOvmqz22l3nJwQy5NH+dSXV/aQHanTFopHuzylL1Qh/Y+suVWPZc/N8+Vi\nS5NhRBrKt+gGloBOzCNXPmLuh12zNRZK7wiKZnVJ2+u0LHNk17Onzl4PDH9o\nVXZGcpHkvyJHPFbJRK5+KEqaf68C15OTTCD5eCrRnc4Fx1RShoHGLq5PyjsK\nxVbw\r\n=o3Uz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmZ8KX9jFu5LS3gW4a50MzdLV0BWaTEuZt/LmT5KoMmwIhAIzi60rAXt+jmQczO1RMQRjkotNpKHnTIRSgsc3g+lMv"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.647dd6b7.0_1595357052984_0.4806382684919279"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.3cb7406f.0","@material/top-app-bar":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-S5NB53EYsNr4qS5Pc9A+0LbpGzr9fweUkxbOgTVlmVClRFAAW3t6wuGOD9t30yn7uh6gfzJx95FL9Uu9ZosCqQ==","shasum":"f768732d59c93fb0ffa6aea7f9891a79c146c473","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.3cb7406f.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIwrCRA9TVsSAnZWagAAcREP/RyWSZLr7a3pGzPm7Vb1\nKaX4r37/Ds55iPTWM/RUY2V605oD2JrlwAvjcvPIUis+KKT3m3s6ja3XMh5u\nW0hPmuMwiPFRO6zGRJI6zHM3Nwy18pot4IZKCpJ1br1dOF1lkiCBOzhk0VJM\n4ql/s+BtBn9sctaBmEKXlzXcz+EK2fZQhb7G/ONtvy2cojjKUVr6i7zuRUcD\n+y358FyFcFabbXF/tDsDjwLIRTb51OSssigwn5a7njAogjDY60nOqUIB789J\nMmV8VSlPCD1iIdyCxWPK/gsd1IYilWnOkbheEDTYbc4ckkEBLG0+vIXjyn5K\nvznabL4ZW5A4SqQ7la+myB4z7iNBmHRyFoDaXmpvtCQcTqPjxggdCXk0j/oM\nHFWxhmAJ8a4OrsXyWzwWXx9rpD260O490NwjYVvNvkTcrnNZVPkdPX6OrSTt\n9FmB+Mxvz88tcA3MYM9ytp07MbbpMW/SLR4c1jW+SsdKeWvsw4aGfuu57MQx\nW1TULPra2G+Bgvw/Lk1euokAmNohoyCLN9uF3z4PLHks1By+L464P3ieDT6K\njSXwGhcvqW5JZBJn9EORn9t8BVatj7gfaZqDCkB7R25pgcD7OH0ri/3Bw3e+\npUBGuP4wQo+KHDbOZaxtFrjjfH2fdzq97UCdU74XrDAd/3ZJh0QUaHFf8+94\n4dE8\r\n=dk0H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCusOJiCiBtV2wjz+mHQGpnuUZ5YpnG7hKLwgD72XY7FgIhAIlNh0z4F/Cb5xCsR1R60Fj3ajpkZTTczX2MCAXTIsP8"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.3cb7406f.0_1595444267434_0.3463330785864167"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.5717a5a1.0","@material/top-app-bar":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-qY3d5tDPdC11JDp6eBbncVEkX7yhtSv13cgbNm2EToxSM02xbEBrMCTysN48CgRmxHQoC5p2jMVoJGCOhbYHxg==","shasum":"f4430c7795ac830317cdbce59923054d68c9702b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.5717a5a1.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLI5CRA9TVsSAnZWagAA+PcP/0mKrhLcmPCeH0g4L9nk\n14qHC9EU7jbgw9vEKGai1mq4/yuTHbxkTzYhkEfa8gJRYXxCWYLqxt82RILh\nbhi/stPhN/VYTiomRejFIo5dBOdxneGBfsBj/Tv4bpcVGJXDZSrzGb+j3d/f\nSYTMNJfoHoFLHzjs62t4xVm1erd+/owAoHF+pG3wHZ8dSKj5qD5twuKHapf3\nHp1L8VFxe5jpAjvSm5XS2tL2r/IXG5PVeWfSRSN0/CQSBF17WNUhEIoECEj6\nteeB14FGVBtEFzOK2DBLUUKjgTzEZ6VxussCi9O23sBX9Qk0wCMx/Q2/g8QS\nZ3zzUdVPUUcjZ94DuDuserOwAmUpZjKOXXIHggWjSqozK1Rd0OH6Rn2X9z4y\nhvUTey1q6xBViJpg62tTHn5OYMBIBfeel6et5X2CIaaOXEXbmR/TIJZBU7Pp\nepJcfFq3MvzSU78fA1hj5Zo2ekul/ivfUfaSN9g0MWSqe2P1oGHUUkckvo9S\nZqzk/uydnVsnKTFnQ9lFj5fRWU3fO6PUYGZOpzTY8FTw/9PgBlETc79oyVQG\nzzhP1ce6MUpslHs4E5j8iL5xMgyfFRxSkEq6uouMBXD5nuB0QI8a4sZgMUlR\nG76qyw2p3l0qNlIWoCXxPYUUhU6LMxL44uZSNAKs09vp9ChKN0+jLUoz1/NM\nKx59\r\n=Ux0O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICwkXiKTVY6nT7SW1pMS+zg8GiMFrw1uchIK5L0ZxY0UAiBdWvUy9lgQV/kHbOvS7/pCzqjqwxiVxMTNnSjt1QS3xA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.5717a5a1.0_1595454009400_0.4770414867772861"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.d84cd4b2.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Z43XgqVqccQ2uz9ugCenaex9uZX7TeUbIxA/WWbceKeKTLBhI7/Pb3aDJXHkhx45lKuFAA5ay6a2lu0qgOhT7Q==","shasum":"c04498afd9a2d388294aeb206ba42643634c021e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.d84cd4b2.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLKyCRA9TVsSAnZWagAAAAMP/iwaGnwAePQ58FD/BQSa\nToYS3Jp+F/xDFTRMw/tWxUE3pb+WsAJHMKgVuHJme5+LiW9kx0HoBhV2nP6i\nrU9WTR5MgU25WfUuAe0o6LoXIpgz1oHEYJ8OVFO9+sU4wNOTk5a1B8fzaiHB\nNypne+G9n2eSmRoIyec7puFNKHa20+Ul8OUZFq3KO/35A1kKCHk6XN6HJtlV\nZKAMUmYALb8//c72CSFsq5Iap0N9MCC0HQW9fj9DEL5PpmYIkSCgIOah3dGK\n9Y61FN0ufDPv9qS+tEJUgqXtjukA1eMo4679ZvY9sZ5L7/LkdRKi8cUBsFHs\naiD/bhdvjN3w+ycipKMtQAPSma5oklqkEOoVPyXbA2HgUS2AJC+Aq8OjeTEp\nTkRPP73/qQHWPcQ8bwNKJ9eRK/L2zSZza6uLbLzyPpCl40IlZnmPpzP3u9oh\nT26kJ7+l0PTP55WDTUbiJCaHv4cCTF+zbmKu9IJpWtPPpMTNBpKegFzcpgPb\nEbtXdU2RF/3FWSlEeQDW8WlIPcskrq6ssNj+QwszaIjQmGo8FKx7vgvlzO9T\ncypMYYUp14LDb0i3RS4u/NZrnt/rSyPPUOC0CSfbKRYUoYD2DMQLFvPp/qG2\nDy0fHUb+LxGSFME82Nj9gk5pdII2NQxLiHt/iyHKDSTZ0nGVSEyq9eBDyw47\ngSTt\r\n=O/XU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB0BQfQx2xqtJYuUyhDsrebmlN+JyRQ/j2UAuBurXOO6AiAFQPGLJR97ZyBegeCQ9qAkKzEvbOaNRwEffZ0Wym0KIQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.d84cd4b2.0_1595454130525_0.4440023849382533"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.f279e7fc.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-2zpgptPAqqwggkxeLEEbuiGG0ZXEF5jhKOgEOha1EFNgu0LyxQjzp9f0Sk9U0MN5T1CZtw0F+TcMnYO2+Pga8A==","shasum":"5a2e0bd17777cf0271f0990d4775c3210560dd7b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.f279e7fc.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLccCRA9TVsSAnZWagAAkXYP/3yfjifkVS++24dlcLQP\n4W+EvmY6Bp4ClJtz4t7Zd+T7AgFa6BbBbbIjz0YUkfms3DdlIEJe1B6O68BI\n9oeMxVkBPgG0UTLWXP4F+due8WGLjH27uqwBmL08Ev70+WpYJsLRitsDGL7R\n5XHEMLK910XWsQQoJkdp+eHvXrU/UDFOI2Bc/i4vMP23HBSotW4LV2uOz6d5\nlTKTaRs8js6EAa0nMWwGUtVUy/ospjtNReTdbAEzqKj1VwKB9madJ73SSXsF\nuO1C5fuGGPlYItFmpmLveK88C92z31Nfvv60OCOnsKHrU8F3ZUm9DusLTcM9\nLQgxPEOtGjtLFmp02nfrJMCMKnvrtlIMCJlHAByDORvsKtlb0fFDJYyveNlT\nLj4OwscUz7Qnk8p/dNmRa/OZKVc5bDnO/PIcjSBOfPjL5Z0hD0s03zeBwwdv\n3cHSRsJhwTdIcDsupo2lDnxW+9WLG/oOXS4m1L+FK1qZdA0iG9IiTkrji5OB\nXsZxeyWjn84guqJjj0vQLgQEygIQABzZ9bWZzGRaFur/CYHSLhSSXVqCXbJt\nNgxSwqj3/Kzq1i9/hgJLbG6X9ZYuzlkQAmjr8OH+ibjnx2AwOE6C7ab+dkwH\nORcL932YMEnrvaOYNzpubzsEx6rZKHvfNuT7FhtYzt4pBh8TWUtAhJ5QmVAj\n2qWf\r\n=LIfK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID0/dxxAXX32T3yGgWJrmDSLR3QyK7MQGsf79TbGozJaAiBm3huoEaahZnv+pIjP5hxITqKQfmF2ONVcGIFKiKXrIw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.f279e7fc.0_1595455260491_0.1752377200019961"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.f181e3bc.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-zumzKSKFDRg2E0ZqL2baJreeva0ZEJusCcsizeUffX5ooeKeM8enrm9k9z0BIj9ei9PKTyLMbGYxLuwSJmqnYA==","shasum":"42995bde3a850da61bb960fec7687d84956305a0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.f181e3bc.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLeQCRA9TVsSAnZWagAAhpQQAJ/+uju/rJa6Y5/jK+39\n+rNsyzGyFJwqKJkLH3JGUj5kRwn6e+HN13aUzju2qAG7KUZ8rBBplH38Ovwz\nd1JkCM03eVtas+go3sAj/HgDc82arc9ep23usEAW8kgBm7zzVeHC4vuNZ8xo\na6hK8b35VmxREsNSHplQIsGR5eCNKhCI8NZztXoRG/USmFvM0zFMCgY2ZlTj\nQP2NlZNa5qH4xorLxwi3DhJvDr5XP2iWo7z+je0feLxJyd+NFCHvQRBdJHw8\n9wAbbQyUFfoku9qhC3+XSdbVgaxeZHyvodyThwydVk2uvyLIYI2qQUtm7NXE\nUOglC9wD9sPw/Ulhhg9EXOAGA03B56re6Xfuly5Jo69cxwgoxuQ+zeGlVAQ4\n+jM+lJkoQSO9USyPyJbBsr03xqJRUPCAS3ssU/LL57Xmr6U1GcrRldLl+xLv\nlqM8fdvwL+BjR8ZgSsUXJ4GgW9s1hJxLcwyOQRf/vx/oWxOmv3TXpO5Zkh6W\n5WxeEVD2sTJzBMLWvPwsu4jOm21k3qVQjusCqUsexkixo5rAfjFBn3OY+PL+\nO+HAE+/1BNddsvMpLdgV2MJsH05H2WnB+R6o4TYMo2ywEJBqw/wSrv76IZi7\nUAIcHZ2ipId2acwUm8curhuuaj60toiXK/eP1DdkvbLQ2CSNI/rfsK+laTdw\nskWV\r\n=aWol\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChsqHamNDA3ylqFvNs+dTxKw9dupjGZMChDKjzJVKeNAIgIdWWNyST8pfF4Tsqx4OAFhR63NwpB8jbpRTj6jWTXNE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.f181e3bc.0_1595455376031_0.16298166067830344"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.346a622a.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-SkBwILJFwJc98x+F7sRjiW5c1/wrzs+0+VUNgBXdsRISl3GEBdzQWMCpJYW2i1Szrzd7RfU8t6gIe5KcJT36hg==","shasum":"8d0b759655dc0be532c6017dde94f2b1c9b6f8ac","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.346a622a.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM5eCRA9TVsSAnZWagAAA1YP/iNEzTkjey7OoNrwQhCB\n2ILYepYf2lS8S3L5i11puWOPc6nwK+lfht2juLF6Ydxdc4RG4c0isiSgnMcy\nvLqCeFfhVxtzVi3DpD87naI9l1gzXRh2idfiK22dGoFKF1nd7oqYC054BTG3\n+WG/ivJhAN2Np1Hp1q25zzV6QdmaMWYylqKu0mHA8/04uHGIFvPIyBZG2FH9\nsg/QmFAZEAb9Y1XM1O4GsqGUH5cmkRpH33OeKE3oxY/DWPTOUQUsyoFwilmI\nDFOq+A2akkuRS8khRo0GFPraaa3ik09v6sifUdkem3VX0Uk9E6uLGaSl3zN6\nBw5siez0hwLI+ZiERLCPMuDoiM347+yS2oWqZz87B0P064F4HiwS1XV1qhJj\nJ8kI4B7KKwX/SkFEAgNeHKA1Ar0y/31h66f+8sfEs5HdROPI83FObH3HeIaL\n1ZdEBiRYBVZM1FscNlW7lvYGyNzfLTCIPyciaHrff89xwwLGAKEyswiecbOu\nm/mU9vpPgzDHH3kiz7YxVJAE2mVk9YTSYA3mcujSfJjGlNrKK6Sq1ofDlR6C\nIxCcxTqc5oFG5enfpOHuvmc63wUnrY2ykK57aRyHGoX3Gr67xKfZTKgb2m88\n4WKQH7uj71X6QiZRx++Xs8NYKWfVCtKzotb74mLU0ZiBjmDD/IsfV+XlFTyh\nn5fl\r\n=/uqC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBHlJsGJq8jZjGXleCxsUOWkorcx1aX2PuUS8zQdZBitAiEA8pfBwYdLOI73E8XRWj6oLxuL4PXexFmErId0Bn2kO10="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.346a622a.0_1595461213638_0.5806174883386936"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.c9e8a848.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Ymaea3h7VN7kM/3tz3Ij2d6OFs9vtgWqpDx/4aeaS4ZX5AIv4kmWlvY2tunJMkP0eefTWNFu4nAHlL8cvEIF7A==","shasum":"84ba6c5229386c9844c6735eea568fb45a8d3f50","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.c9e8a848.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOOPCRA9TVsSAnZWagAAEl4P/1wHYhcaJKCevrcsgMqh\n3E8l0KXTCtjO2lvyCcdarAw7yzK6mB3Fi+umjr74Wzo4NIGwjs+M020NlAXH\nGxhJlGXJVPRuppcU8lkxgd1Mt407dp+IZ7Vw0YFbCQmkMSV9xKZ3hbF/wgIw\nIeUweIRn4cZzGjHYBYwkH36G6XtEFswqKe+Ff4IW7vbf1dwD5ipVAymL/cs2\nqGIe2p2FAUeljXiMU1IZO0/3xGbG9isCbzgFU18LKVd0cgz/oOUZjWOSQjgC\nyEmRtn7UWvLweyW+Lyvqhkz+hVy1rQ4wdG0/R4Brqt51O17+MdSEbtQnW/TB\n0q8l0jL8RDjlx9tbkdOP/jRqF1Ex6GxEh+NdI9cwiR9ilbb76pjkltpyOXRl\nyXf8UxjA/ksjEwi6Ea161+QJpnliD2JoA3Zx4ZjrqqA06W66O4dWtAw35iOB\nuqZqDV2sJSO5mxkECH1PX++s7CbONq/OHqBNPr0qIDlQa7FXRZSM6QAa62ja\np1xYtvhQaYezu30bKcfMqj4CfQpmSRibAJ/QRjP/ilu4rs9zopqftE9JoOwf\naPVVTg/P9dGHHPWTd1BPkALQhXGLQ4/SF9ZTVZg09QfDvOumSPz2+UnmMScw\nW7DyRMMkxlhMh87gCuXQ2/f6tbQs5kfmIQmmKNP135/idq/6BtgBvjpARJh2\nUlO4\r\n=7KTI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMcjQDnJUXcIAnqC2k5oA2ov9g0AkkIM/KLLUQkYk3uAIgKcgxv04WFKPPNiORUHHeFsOZzpltnV8bYCSFAHp6+iA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.c9e8a848.0_1595466639168_0.16652679205028798"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.718c385c.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-9vgVd7uHE5Hlj0uC23asVdQyFmlZLswN7oHPqFfVEGWNBEcUmD97EE8BA6Tli89WyJa1HqccZ7JOJFUp3c1/pQ==","shasum":"03e496268ca68427e95c7742d746d3cc50ba9de4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.718c385c.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe3UCRA9TVsSAnZWagAAgWYQAIARO0ZXM1pG1BDrLagG\nvWYIDEUnvNMRoxYFtq8yZV8S6g8qquB//L2Dq0OE/pWw7KNuMFVIg6arz5qr\nUEd4SDH//oYlVp1ESNZeN4oens1A6iddyBJf3ByMZnPZUUbngwQ905Ptt92J\nYTCAOPNv+o1ZniL68PA7RqQB58rjWRlBCPVEWWqphx3ryJuMpL3ASCXfUUq4\nyD7X4W72ndsF3O7sa8I2J3UOSgRb4HDrWvZ+uxqJtpQAASMx9H0YOaWJQ2It\noc8GcUIHo4cy2g8htHr87Eekj+GPahYsmGQDw76UCWU0QdXpRSXs2RIdw3Qw\n/snkGZnULGLr4hh3a77kUYtJC1e3h1axPxVzMJtd76YK+RpT2MooyUNl/N0q\nGfmWyTefG3Z1hI4siQAF8ijpUEan+jvJjh6hJBVDEPZysVZPHJoKPEHKZDVM\nrmruNvC9rDNU1jIVXscSQUVeGo+TkZpq7R59mof1WaOEM6762ngg1VHYnxFC\nAGltRJfX3ZjtdtI/p7tvmB+fAN9QcBAu673+YmriFADpyDjAX/9Z/7fm7wkY\nuAI2AP7f4zVQJ9Uk/z9qLOGHqcyGAMYhVIsfT/e6uYc4YcEDr7kA8p3evdPk\nKA2XotpZajd9DaOWW64kqY/24RjxAC2tnzv1iNdxsEAsbFEOp4g5CpIzKviD\nuPPv\r\n=uQ//\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDB2kDQDXGTzdOZ40fUIZIYB7PdzR2doliYBggrNqNgvQIgO9FiIXBAkgjzoWTpuqIBNcXOC2gORrF/v+r1kWuqXdM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.718c385c.0_1595534803717_0.03418836799435043"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.cd516a27.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-vJq6dUCEptbuhp+5kPOl9XUG6p1pJlkT5STfbLQvZm8jS/cILKNNhJhGySsL4W/1aXoBTd8V/v2KWC3PEp0KaQ==","shasum":"3ef4b205a9f50c72f237ab9f69e8604ce432c877","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.cd516a27.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzJMCRA9TVsSAnZWagAAxioP/jBt/lod7YPzfDXKRIJs\ncVUpWW9nU2yFihNWdPeVoZESbMJRRLwCSfqkYg2J6814SLDKAGl3PM5bOY0w\n/UPRlLcEgzhOgkLBP+9eGvm/j1J5WWahtz8RoCtmwv3I26KnRHke8CWd7gmf\noQHvMDiskdw5g3LTb4fD/D6LVFd/bG9UquW4yOCw2wNPBu+OW6PuHSeuPJIv\nNTnLMoCszEDKbWiUUF8qiWxMX/zVuNQJMLOZGjFaI7oMy9IQEqWbYZ65QDAX\niM8q4C/tkjRehjoRA1gWXmaANs7boxNxoXLafmJvrqxwUbbtXXkvpkAWiguR\noue+bxYFL/t5/kg/8DMR0L4UFWtYQ04GZB1w02lCv/+rVdV8g/h4hooU3JP4\no1x1uJDbhftjXBXwNibJ1egOuPRbe+u9/6tTcJECSP4Xxxyd/Tc6gI05Wp6/\n5m/cYNh2VrxKyZkfLFsUn2/a8T4lTIz7Val8qCFruY7aXGsZihRLz6JXL9Jq\nLegA8ZSbYEfTnprrTTMcx+1k+oUcDINA2ARaPadrmRCT8fkv3yzjEm3XtJYT\nrGhhaO2uGd+exYN4Vpd1bCo1g6cEcSLm8vYPj2gRt8TAIQKpT0M5P26/P+2O\nfcVpRnhCAT8DojSY4e5nO0KvPbUQdOUu1aZ91saB9dnmqnzFy22BBKyu4xsG\nsTqt\r\n=mAbG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICwW9XE0oKvqiqQPt4e6SNpncrGbpA86nggcsm4wgUq4AiEAxe3gnUaaTzmpuva93Nt4CsJg/2HgFAn8ykzFx6vEKUc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.cd516a27.0_1595617868036_0.8319607443254946"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.1f082191.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-WJd1j42YnD0z5YIqTXORXVHbIFFPN885Bw+lcdaU/ZP+rhanAgUBbCelDb7lXyze5jdxH97Hj+sfBZl5cikhGQ==","shasum":"7866d73225d1dfd80061c9e709ecc5dc3b76b37e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.1f082191.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzOLCRA9TVsSAnZWagAAIbAP/j/H89ySLR0EnnycFtH3\nkIJ3kFkFs/ZeJMQ3g2FYOursSVb9ZUwPa9oqT7kuIYyjwd8ig+kv/C/4KDn3\n7TVRXjyXdbsEVkRnG5mkIZSrV0Zi5JDXMk0cy6mNKRRvO7wH2i+8NkHEKYLF\nlrKnQcI3/9LsCeJGZHoBYltEcgCe/wr+WpFVss1at9ngafVkRq/orQxQEoUR\nIz82CFAK93g1nnsCFzSN68qtt5ZsY9gnrMnItPNnJ2vIF2cpDhRS/WAVM2n0\nS2DcdUi0xO7NUQ3mYbJMCp5w2b272kL4Zc+zYYrgknPykAnYQqTvYD4npBQk\nc6Aw9Tuq0IrYx7r6Om/2oi3cdENjFfZEEnXMDl7DkrbbZOuOBsSlDEwwzEI9\nlonm9dmP/e6Iknu5EoFR7wAykNYtmJnRMci3vDp5AN8kpVVsxU9DBVso3kgc\nkTg1oPFHI2p4zN8JNjggMjxCsU2k+zVPKT69FrXPnGeqFgiOknM6WpOi8OMQ\nJ/Yz1hLdGiZV8WoSb+OD6q4Az6VvQwNTuN0gNAlEmGQxw6UXI3hDTSl4XTJQ\nL2TPqCba+r5JCMKkD4CNHLYrJizRu2ZhUtHUmhIUT7KMV7WAZeQQU1rIrlZc\n1sGnE0mglnXFnYZ/AIWP1jQFdoZy3KPJtmH/pWk3EONDZPqF8GqYDChmR2rU\nl4sn\r\n=3DB5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEQbUyg4YuDNV+1Sf+ZR4KnhZ+KblrHuyu2WE1UEuiopAiAfhgxu4SWRpSvOCgBsyMl6X+XBAi6wqSouuatuBTvHuA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.1f082191.0_1595618186651_0.9680921326810925"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.ea3e82dc.0","@material/top-app-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-0nKJxLCvjzSF4pCc2ZX51uVWRZjyUEFIBGUO4WJs9EZMMwZpgrKdQcQ9T3LNs3+HBAildQhALLneOK5oPWbitQ==","shasum":"cbfc9594bc807334446b97a429f1fadacd51b5b4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.ea3e82dc.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzS+CRA9TVsSAnZWagAALRkP/i71pA99uhMEUaEgcXyK\nIGBMUnmH7aF2ZgODrXzX60oBBjGIaWjZZHy5UE8ehGVNvlc/EkzKQLcOwppb\nvcVZpv2/DgKIc1qJ7HcdzZFzgg35RD5DF8nX8ntCEdozebIwJ4oh9teSwy5P\nmXgwd76wWLq75hzpsjy85JyelEGWfYr+uqwj7cv1rGCYO+KXgs6Dg20MCCsr\nu2iX2YmHo2q1i7NIeoQCaVPl6bPFhyVzse4aiOgD/WwEkYDYccLsWyzSUgfi\n0Co5+BREXhc6X5tkcDWEeWAi6IrQzB5kwrzRVyPyyu0CCJS4kbnVSNsvaqoU\ngR9dVhkjk7fwaCIU88wbDVj7WWFAeU7GaEoaPCUlcO+vIP8Q5DiMhjJHmxQd\n2z+CRX7dQDQxQTLAUf4uzQxb09RNiYAjRtPI378Hh9jx4z1uPP9x9SOoe5jU\noPr2N2ym6kzpoFJGidkv8HdmhRZPw2N+3xArlbq4OaOcL9fG1MBsEtqs7v04\ng/Ue2KVMolsoWtBt2s4JOuzvbJHIFL8jf66JNLWWD0+93McJSGSzs2YgH81T\nxLdqln9RBP6KuNkbuaYRWQYLdufGRwMRfrNO7aJtMVdTgcJ8oQKmqkXRoyiv\nA26QmMUcqTn8TX693tX+WCFRVJH+4BNP5WMMoKaNNwnFX+pvDdBPDR9fWa3Q\nk4UO\r\n=rC/l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRddkJHGusDwxPNg6ClZbBZTGcagComI8O6YG2I3St/QIhANCn4pBabIdWcCR+EnCcZzW3NQfShYbKpzrSIAypOwnR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.ea3e82dc.0_1595618494123_0.276799759321779"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.94987b64.0","@material/top-app-bar":"=8.0.0-canary.5511e0aeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-XvcXg27MCtv9OX5LUq7d/WKbdAQG+Ojn7RJARNqiNJwaqOApyIC4dEsEWQ2ZchYFKkd0PHRfLWy7eJV74wsaIA==","shasum":"58f8777ad8cfae1fb3120cc413954ce7f51f003c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.94987b64.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0QICRA9TVsSAnZWagAAbb8P/A+j0ATkniGebSQWu5OE\nZnQRvcAlkoL9MnrIm17Zx0Ovsh782atia77t5HllreafjUib6uA0JRJO2W2C\ngxOfeLt5vJgUZV4TWh1ynNPrPPCeGHvIuesVySdJ11l4b8oDiTfCeYAru9gA\n4Z88skcjkOTpY1afaSeeEFLAqXAKmP+pZdebus27XDAkxIDlzDgyY66R7nVc\ndeT69/nfPBclYV/C51VyGk4sfKJzSsCFz4L6ssnuPwwHkhvg2rXtkrYVJP3C\n/0wDm2cKjQhNOVeJLf8fucjH7hOYEwrPYBmpSUwB39Owx8M84UCDOHBjoCg3\n41lQ/YsThVDue6WQwgqODnfolOOu1sw+7hqD8SyIsZ6NTg4NzzcavFdUkqgJ\n8bd774c0T41swmYTCCD4uHQGMmhf9tXjjlN5ZFY/c8EjId1pb0HsSdVvmzMZ\nNPteeA4p7/eBpj7EXRA+DFsq5WgfZlB/rLdkeGrf9kMF2KDudztzKVaEZA2C\nU+/5qLVFZpYVayQHuyibjaTHL85L+isL3w3bMd1ubIVRfmdUrRDAsZq88BcB\nkiVZrVIJWy/VTxJLY2JZfLPYFij5+NUTns7JSbX3IkTOzNPpeiMB0ie+orJn\nxPXYv6S7Ut81E0AW4sUVNZ24Qb7eQ5uYu1rtHr8TCNuHn3ZLPeaepYsG7rSS\n4r7Q\r\n=eGKH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDoZizuqh7j58aDVl0Sq06d2C5o3eZcMYm4ah/QpefinAiEA/TyiQ4RNbE/5sKbzMH8VDHSSQjAlYyVHNsat32F4xug="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.94987b64.0_1595622407529_0.7040100099989712"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.ff49b7e2.0","@material/top-app-bar":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-wlquf3cwnJQ4f+fjZHIykcqCx8m+nHtJ7hxY2+thUHWLZ5EG9tmTlFhHeGGJxJCW3nXaRSfYPtYyZbd1zDEkgA==","shasum":"1f56c5eb5991ea8262cb949e319fa11bff39a891","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.ff49b7e2.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyViCRA9TVsSAnZWagAAPlYP/2OZIlg8RwVizeBjD1zD\nDWZONqcu292rQyI8tCLVnlDxgM+2AJAgHQZQ2pf49Z3QPJKzjEJ2kpBSRLlC\nIuPOpLCI13UAQXGk1bW8g8oWUQ9Z2YlMsNNLtRY6xsp4Whk0pZlIjQml2IZN\nVjhqlPePhiMa3xNL1pByM/nQc4vGiGHqgRqWQrWZYrIAOR6Tk/0D5lTBkc7d\nLNS6PmbTkDX01992PCCVMv9e8/o3rDguAqZOHWU7j9raj29UjeSmgxJ4XEPW\n1zr64XvvMRh+FKAJ2db+2lKrn9Ggzjj96rWWZVmsRsAtvFX4IdPJinUW0sIc\nkEQOXQaV/jcT4gPSXD8dReH37wzd0+utHHVVr9NETffKqcSo8cNJ5Mzg6nAa\nGYClHEmDxdUqKZ7JTBC4VqbMIO+LM6gqit48xQA0ZvALl8jvb+tJ1x8PaGpI\nRsfR0s2NwcaFD9CsDssV9BEWyfWafm4UA+L0gXj+eaaHtNWrEzG0FTanHMMa\njSmZJYleI8mWf5x8ecTq2OwjOChnYJmm804kxMECcNEVBLMcgg/1X2EeVb/4\njwobhviFWpdO4ghB/+B81CGABgQZIA31r0Pns5aVYynFN1Jn/lv4Ku2obA8c\n4VZm0SWjPceyV1XS7S6TDZnC8GcbYeQFOBbASme0XNWrrlqquW+jbyl/5+rC\nfZ4O\r\n=XbV6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFAr24PyLqkC+7BMWMwBCaOm84C3dZ7y1HqSXZoKYwmoAiEA9b0Is/Ibqbb5oMowP5x59G2dB0Zq0pNN/owhs/rccbw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.ff49b7e2.0_1595876705529_0.4474568805131889"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.3d334ccc.0","@material/top-app-bar":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MaEeeEBKpbkcSuU7f929YlgurcI3itPy2dFgLKQGCfI+SeA8ftHEmCwvsMuK44W9jmpz6PD9anhp3VZ4GrZHJA==","shasum":"9db71787fd0feb5ef6d5c61fd6f43e5eb40756ff","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.3d334ccc.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE8fCRA9TVsSAnZWagAAHzsQAIp8MD+9l2ahrN3GHTIA\nLA8vFtcoTzSzw8NspMA5FFZL4ott1Xf0snF/gVYNIlVvNtbeUmMo1/2v5TNS\ndUCVWT7/Z43A9Jzyo6X0BDXHQ6xo1vl610zdBZQ5EPTY16j3k61y9vyEqKeZ\n7iUyYbgNnHpsKkPlP6kLN0KmB/aCVJDcRRR+rXEZ+KHnY/WhODUwwL3k+t8j\nB0hki/4p3Y3gsNwN6FTvIP06OI2Hgc2GROrhBGqUhKkaqtC5OOm+JDEjDSxT\ngln8D1Qloguf2ptnezo8Zq1jlk7CJ6rGD0xn4GY7RZFc1Gj1mARf6j7kBUFL\nlIQ4DqL7yz3f00OqINYihbyA6SyNxD4d9khGB4OcB/V1nWtr7a+IbLxkEFAl\nBoG+TemagLXEDEoED5oW/cvOdhTsa/ZpJFmYPtZRw7bFUuspH7lhSne0RRAY\nMz9gIEgeozqb9OAWvMZElU9yAEeEbOpyOVRBYT9juu7Pfu6SU1cXBhkPZwaK\niqczDk163lx6ec4DhSMh+EVDzxiC5IPBDSzqzFvm0dH30tXAQqUSpXpSgAvA\nwjZHyrEs0RlER4wYPO+L8vNXLs7IAqELbxnUQaaV9jbhzNT5KLrroDRfnzH0\naXd4zPGnSx6jOvrbj/EAqS1gsCEQGFVc3a0TCpCC96ynKEHHNblwTeL20KhE\nZmg4\r\n=AzVp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGZvmh4dsUF/42p8vQmBPdNivYm2dbht4Hr9FJ/arOTsAiEA94Fi3/KPUJERVII5KhJ0MhqLDps0pkumz0ZS4H7EBMQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.3d334ccc.0_1595952926705_0.28886648811358673"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.82ac569e.0","@material/top-app-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-8lPOfpYVh9BNQuepVpDVLwJK3DJKKGDTR7B8PBZC2OFrESoPiAvziozi6gXoWtiolNi3J32MT+grLys+gVHHxg==","shasum":"74f16dab2f7c1362aa306e03153fe5e3d92fb8d6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.82ac569e.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHGiCRA9TVsSAnZWagAAHoMP/jadwPlBHs6dlFs6iFd3\n8rZCDS3nrFVpnVs+77r0SxTLFG8RM0igIMEQSQI5iKAyxFGPm5WztIu+wQlw\n/jGvziJtea3r1VdBxXZk6BnQCM24NZrHA/8CZHkhVf6cug3yT8J9fInD486X\nIZoFWRZmBQjpXdC8CLoXny/i2JqN1X1JO8rMJHcUcATS5Ed6hWmHv7S3qvMF\nPhFHz5jMLspUSdOwLu/BmN3LjpsoBBls4wCc55wmy0V13xbu2TxaGVRKyjYZ\nZabYR5q2eOn5n8ipJxfYwtU+oNxq2yYJP0q5448SPC8UQDFhGJrrBTu8lYhe\ncQU5pW7aOk71L5hgsNHoq90qYlVP4Zzq2p7mJwJuSpFaLv/u0rZfkoqe7jaq\n+0gzdTgA+JDflGsM254OFJ8frk8sB4Y+es5BpHASnIFIBvhD9wFDf/+0xSEF\nDA8gsEUv8B/IDwtQjLaujIyIK9KqKyrWo4wHvfmpQBTmILc8ab9ssXUU3k3k\n5tzZFYAbD+nvMKBY/xsLhDUR+z4mLMRSWAWTxGxi1ieFPoA4HI/FyxPrSiN6\nCwJFNpVjt/i1EwNUlcPhZ4JLMKU9H/UcJzGTDWY0Cv0/8GGcXqzwbeCy2CZv\n+n8pMr36q4L0UidykxgTJHVphjQO0yO9F4nAoWzAZVmtbDtFa32dQpJaJV6J\nRuVF\r\n=Xw3u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUbexzs7pdopuVT/vJy24+xiO8BV6fMO6gStseVfSG4gIgH9pSd8/22SxINKOxizVoVnQv48cIsH6Zaf0ODesAdCM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.82ac569e.0_1595961762289_0.6624182711843478"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.99df7397.0","@material/top-app-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-hSVaXyxNJ2sw2ucG68M+cUccCokb/BhOsc8tw13wTxkjT+C7AYBzpULRiBWLhP1CqhPVtJccaOxGEPlvsNHV5w==","shasum":"e9b1fa135c07a257746a2b20a0eb17a16da26a2f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.99df7397.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOGzCRA9TVsSAnZWagAABLUQAIpItcpVWHw94gtBEi8g\noQ6XUw5N4X2qFysFbMCfA/k2OSMYehxuGO4xSp7NigfidcJC4/uwi1bkJNdk\nZju0oUrGTSS/vAoHcu//tqW6gKyDTH+uuVcEzupO2SUOt8qEZtPZlRodjNbP\nPkcyqsjtImHTzl6noGwSWnqPSJkOGuEtoXxu0DJBsIoBRayFOTt7Bw9bekba\nOXvMMaRihFMJ5CEe4eSHhHfnmLbC2sigi/coz1j1uuOKuxgGQvB2VP3dqAl1\nYnD4+/to/aemVzE68jgu7Yhl8cqtprP2S3r0yAAEhpZpGPOCm4sSsGW6sAHV\nljfTP3O6TzSeAm70n23jCoFJdi2AEgrAxLZxD5P5Mz0oJVSXuHf56YWJ6jtc\nd/zJpMswI261s66SkKiscPMmZdxCpIw0lIvxJh0YgasHggan9TCwEZ381Kyr\nCmKihsiNwEMEK2Vywj4cp1a+ckQYckrknRCNSLVMw0yXmrTADYAn8XOlLlDo\n2aS16eJc60nlDBi4b+muzBM11EGxiGHuArrPPUj4Co9vZPl7PBsJgIDAbe4W\nCxWOiOckN9zGiwkuGoq2kF9jXmKj1giglZ/6xUV2X1bUwlKY1jL/EALikLrJ\nUduu7PyWJ1OISu7jrI4u+zURkt/5mbobEhaqRB/SZG45GkGsFiYVjXuRDyVe\nL/l2\r\n=+t47\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEFTu72RVedbSSBSaXBfcnKWmyJ76qdKBpmMWLVDDBVoAiBl4B2EfPoboP06uypn7HnnhwE38ObfsKA4JrX9J4eMBw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.99df7397.0_1595990450632_0.03564853428573378"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.45493e05.0","@material/top-app-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-HuSNkE15kXY4IJ+WeZXqSvH/7aBYKdg7mkvjLXoV1ldKXsWImHthi1tHDVNpUU0hK/74whBWe3nLlR18boRaBg==","shasum":"05bb6a6db44243b61972b2623508986160ee5c86","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.45493e05.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa8ICRA9TVsSAnZWagAAR0YP+gMJktn9nFMxg3BKbLsw\nhlmlxsR6JYHTrhtmTp4nL8bt0zvB/K646jP6o033EHi/XP56TkhMGG5jyAdg\nsiojYcSPoROHNz/fbiXLVTuIwBAKMgLET3Puu2RRYiW4EWDtDcZO2VybkGcm\ntCHT5sZdoCOq6mf0G9OFB+UrQKRJ/yfBDp7wpRHLRkFbqXMrHgjLVbq88idQ\nVPAzod6pxhPySKyaGdIGUemqL0Mc8dsgPQRTHTq7Q0t5fP7QkR/U1MpyAa16\ncVnkB7bNQ3Vcsn23RhU13brWHQjFcmKv5uDQsHrNVMPQvqEaV+UVVh4VNsRJ\nhxc+9OSh5OzcSY+RadKghDN6MGI8fEZVloGhtIvjl0pHJQexMq2TNqFCYKYu\niBv+aAQAx1vc+YuRr9VMZeZwgrPtms9phn0to6cvhyfQBVjhkQr9Ch/pXtzp\n9LWP40K281cLhLVlihKnGv/4Jf4OxfKTh1MdNI6Ts5BOHdy6FRYMSxlE897m\nWofxkzp60BkPzGwwH7JxcsvYmjZiH4D3AbBd2zFC0GVKhT05ivc0yf33yk5z\nsuk7afjBnwX2yEJbLnV6N7Wut9Ksh1RIgcSfDLr8+T2lzwx/vhE00isxoLgi\nqoxJSSyNm0ppcWIpY/+IzUsG7L3lv/PaJSaB5UaYOeGnqR+V+nv5IYpPbjjW\nisvF\r\n=3ijV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5ePtUDlZKmrdH7H8Y6Q9XALhsIjKRJqkHXx5cM8RAQgIgIdEk/FC8AR2BuardIaWWJTiEZaeHrjHlOPZH7yHxG38="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.45493e05.0_1596043015582_0.032154813730012055"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.f2ab0a95.0","@material/top-app-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6UAzy1mEgMS0JbQb97D60ZffLd9FZAC8MW+NEOBEyOB4jz/F97a6PIubeYpBhi7fsxsj0vNRN4KoRuU8IhpNUA==","shasum":"eb0b6f92c4145492db4e2f708fa60001f22b27dd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.f2ab0a95.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIbAsCRA9TVsSAnZWagAAGQwP/RFH5FKK3mBDjncnshE1\nNT3r3aBaeFQ4t17iUKzkeJEwjqOWxJHfDLS9uRl5tjrzP8aoLS25YOfjk6Um\nolewVpLW5hdlQBy06b21kbZQAH6CHc3fbV3Yq+hOMLYF+33pfOlsc4fidX/Z\n7sn858iiqhCYUvc9snrGR0EdvprZw+lOTRoN5PxBZGMKxI3S1Ue9P9RnHZcE\nl/mLz1MKyzRSJLAAOJy0wWW6zZ65PZXmHIMx4Hej7Xa/1E6OHbqq79n4Ibaj\n3z9AmxSr/6dEDLbHTKeMfC7w6EH7H8j2P+QSyS5LSsBExHIxxbmdkM92VqII\nlhxbe1brNN/ys9L2Y/01EoaBoyshyGd+OS4K4ylWzS2DAX55lJcChjjh8Lva\ncNEevb6hXdfzK3SDR9CcvYalnUuiigGahFLAyEi6XJtSuJzVXWHxsrq17Ly+\nULa+Kzfb0hnRJfPX/xaAa4JS33KlQSzbhriOsEfAU0Vsdm9Xx2dJEiHCt9/Y\nMskGD648VeAqBwB8enk9isGn7ynzE8o2OqNLJbghvnZ9Gojqkascp7+O5ZZq\n1QUeMWUc5hD8OjfazvbQGMg/Yb5hVoQBOBm+21TK4pyLxnnNOcpmKN+dJzSy\nWyj2/1w8ShcBcC+yqRkKqH7JoO6OiolNnWfX0XPmK4C8aEELJBoPBmkZStIk\nQWiZ\r\n=VHwe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDcQZHoBgctbeyqo8tGoS7qDPNy0DgXDye3wOPzFj9q1AiEA6rsGNw140niAjyVw9ZeyTqsYI4PnjB1BMnvqxFqZM8A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.f2ab0a95.0_1596043307944_0.035009421808893215"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.45f9eddc.0","@material/top-app-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ENhnrd1ZlBx8EbnOKW+AN/mnJqIv2sR77niKuprVEo/uf+tHJNmROoYsWyMKTuvZrDDEXmqMsVSya1JoF07Mfg==","shasum":"14f167c0d12bc5fb966f5cde6bce940a01af9d4f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.45f9eddc.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhprCRA9TVsSAnZWagAApZ8P/jsUT+G6K62Rqaqq2S1Y\nagDgaxG+8AFOrg90FYepgNImoPUoy78e2zn3GxeJcTDDoTiW7kuXATYuyOEa\nxVSTZM1C2iKrURMkAiliuptitiOmqW5PWGRrX8e42pmiHmrUfziIaSRaSoTC\ns7CNDStE7Ww7V7cROcktVv9p4Dx0OXLwd/QbTvBzOZ6JUDTdQCU6HatuFWXe\n4+eElu15VIrWVCU3XslSU7hehbtyA+Y+GQWMeLr8e6zgZNaV0DWd2daclDTU\n+fuE+l1veodMBqcMXG132D5bNrKjQTsJVUbbWMk/KPjp1FJScLZwRjRzSE9T\n+ozpcqgBw8qTyfLZG8JE6Mmo6MNuIo/gaxuDCHU01s2321V2FYk7D9/ZnRFq\nFud0FhsvOva0QG+4tuKypbgrHIsoV54abyuDUJubs5JcXIVCVA/ZZ3JFqlAs\n2qXexJfKwFH1KYKJfA3pV/BGzw3YKgjZ2riKGHN1YQSMkkxZXOHfggxZHNPF\n2U1gFA8gihWNeZUecTgI6gAmDck1Acpy5iJTE5KbIESHK+Zw8cJ5UFpsDpfc\nYkfCDQit7KMTO91ctt7i1QjHeCXINYJnY+UwrL/ikY7wB9Rm6Ui8k48DDvW2\nDSqgvhYP2zHY8+KZaI27/do7/YYhBUqYOlBOXTDTRdbJVYbQM9R/JOvC1/pW\nySqQ\r\n=5K/k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGGjnUvd4NxZehqzbLkD9ODpRllK4cOOXpbbGMsny3cdAiBJIYY8XTqiGVMnqbS3ZOpKB5p9LznN6HtD0L5enl6cMQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.45f9eddc.0_1596070507142_0.17731711912158232"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.b64663ea.0","@material/top-app-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-w0HW8E05q60JFADybmQQPFmqnEhKeRwT40WIBn9+7scwlfHT+LLZY1PPP0hTMjicjy0SATw2h+5DZ47EJqvoUA==","shasum":"40101353d45ffd39fab4670c710a85a9fd3cf24b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.b64663ea.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwbDCRA9TVsSAnZWagAASjwP/jEzgGlSI2+dBbfM1m5K\ngv0xfozz+o6AwfMYO4MRXprijKedXjEtxF9oj45LnYxK2/pTT+4AH34QixXW\nf2mnxK58C0kP7RTWfmYOupFGEcgSutTDspJIe5nEKaVzYXxKkA+XFgZpbH20\num5ZsnCG349xLLt2q6+6wRsMh/Qjz65vgk+qn3Fh1zWZVQsThpGiVo2PD/Tq\nJU5IvdeEHCbuUKG8PoZhEcLXWC4YnaXo5WhReQV7R4deJW+ctchlvCrbF+Dz\nW4ohF40rlqNmjmKdPUnWS7ecEAh18qo8+G2PJf94Go3wn78x0Dp5t/hZ3cjs\n/PLmcx5SksU1pFl6exOP9QCzp7kMD527C2Z0rIYJIC+S4y4RbyKnMLtR3eGj\noTADhOAXClQKRoRg7bOy80/O9wDD5XtUPPdCYlSBvvrbp6ffqKKAQwuq/JHV\nHqKwx5tNQY+spE9JjTY4lUhHQANE9rcAJWCtQdCcUgIV/kzGCny/zTF7F1iw\n1P/Z51TVD3XCzgo+A7Evj4fysHWB37eADbENluTfK992rxDfWv3IDaJ008Ie\n7j+sipo8A0eZ6xh55/9/xvpmS5kjMlRHBI9Ig7K2Wce0uVQwtnM+z7Koeji9\n2TS3qpCFwryN81kh2Q+0qNVZZO4m2Rori54ye0OB9adtW75fZQG89q30gi96\n8sWo\r\n=mqm+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfUrp+COl39/t/vV/6Thn4nbnlOszgJCVK/PipwVbEDgIhAON6uFs938T9KsFGzNygrFvIljnXv6iUAR+wlqnr1smJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.b64663ea.0_1596131011135_0.4118098968313997"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.9a1a4d2d.0","@material/top-app-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-iMGpxg6sJw8L06O5dktHCc6SMTXaBr/ItP8UiT7f0FZUoMeXDXLz2O7LbQdw1erpqA4wr53a3zOZegz2XWz/Hg==","shasum":"7355f57770280a469a0bbc62366036af886ef14b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzXfCRA9TVsSAnZWagAAsaMP/R7MpVdyJhnzs1UN7+ZM\nXhSPWOC/rnXY39GSOzfcxo56+SJjdm1DD8MNWko1PVhbvgsZ2AxZfhQz0BVe\nQ5MV38Xxln87cXoK2dDoBBy7ptsfdz3AiPEGsdphF38e62FLZFFmJZ55DwK/\nNPF6gYPeGngBXoOnMcQeu3twYP+CPklHBIIkRvKMkcXe9IcrTPdfY8T8+j+g\nqbY3sPgOt/zxG29JxnXBWP1FJojtxCjErxAfZTQEAkmLEMZNhWfuhttYDusD\nBNzfYQBl3X1fYXuOrr1X60+g0fOmQuilFn6U2XkngVjjAGIt5Mk6TGYsSqB4\nWYHyLF3dcUYJC5m5IHm/dK10b8jURbkufUULIVnvVMnyV+d2O8DGL7U0C3KI\nS5LXrj4dDwP4HGOuhRaaHBOtvXBJAIB4lF9SzJNn3jCf2Onnd5JhkcCBEdHS\nQyeY6tagkt/YzARXSLjJeVyXIVrosrbvVD2EqeyOgfBv/Xv8/FxeocRO+SWH\n/mfKSsT8R17jwbx4KDJYPYVH/9WXBOtPTs5C9JPSaFPhCNzrfo0bE8tPpaog\nsBt5QiH7eUX0q97CueYJFro130gudkuRW6c49FQ9X1+pfZUjslUa8dDvAXje\nGJYY1D20UMC8FmFLPvIHGiZ/EzqwUteCWvNgmyW6QIaTD0VirgUikT8QTuvg\n6Tqc\r\n=YLld\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFlWzXNarNwSUDDRplQI5XdCcajyYLSDf6TKgLqXKjxQIgZn1I/Ns8a3QsHOUr+TweLhrhena2RQ8DjCEtY9wGp9I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.9a1a4d2d.0_1596143070626_0.9183438991550774"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.887c2848.0","@material/top-app-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Vvvzrcmemrk5YAwqm5MMjBVODAAPFTszzZdoInzrAVEYjH2X4OgdC3t/Y2kIrm2LZsylAyKGCNpp5tGhvZIDwQ==","shasum":"cee203f3f2dc2109edc03b1d46775d596614867a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.887c2848.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0RACRA9TVsSAnZWagAAGocP/0UzydsrG0R1VFcVWOWl\n9UghY03mD7qFIq5LvGyqE0AMjIrXJbaBk/NbqzCyT7OfGdQmuPGrvQkxSQQV\nahVnst2q9mndioNvMFeBvdOj2Av24FsXPPmJ88spOQFFVxCTNi2aEPRcf3zg\ny8h6jzcabXLEbQEd3XgXtvwC/ulHLbfkPSD3H/BgyZmyK3VLt6f75au0JLrc\nvksXMoeOZZtifZzZSG3EgXqeW1oOhvifDW7a0/ZYjfGGHS29C3NM6TQyDdM1\nV5OZLFIjbpYZGov/JVV36KlHLSa+TrMumu+zXjqaJcy8lVC7EGreiKhNGQyB\n5ntKz99+QEd0bjc2z10031jIKV3CRW7DT94XqVPCGJmrjYE5UWenPXQbC9MG\nXGQ5vzEMq09jfIqKJvnksvc5SPrlHoW00t8Q3BcpLrSleBHOHDlO+razp/5k\nlvrSeYWiZBY75/KmfqaIO89SzBBRdAPCoNK9ew3BHFCLss2sr5eJZ9w46dvv\nQeUsHjXs8l0ZWiwrgP5TpwUzDUn0Irqh4L65bUl0z6wTDphJANxHWoH2Av4w\nmwXtgvYJgJ9LKa7fVj8nkv29JuxxeWffmqv8kYaEpHgHcfQ2GAmdrrOfDjiW\nI+iiJnr3xeQYFk7OzaJdmjnnthX4tpVCYx+zAan7LzZWjEH20bjeQS8Umnr6\nRqXu\r\n=xe/Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCW7/ym6jFVbe7Sz8jLxH6hK+a0Yg2JF5PUYYxFRRSE2AIgRVqMEUv2/i9ZjN/xLuZSe7GJr5V44KmPXbzJIhd66FM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.887c2848.0_1596146751715_0.9448082422272017"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.354eb695.0","@material/top-app-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Qv+cuCwXOCPUalwze2+9pjD3yHKRh0Js5N70ogSKF+WOog0PYfjpx5G4veQzCGsnKHkBgw6oTmZ3m3hheQlc8w==","shasum":"c62c366753c0fa03d450078b2dadc5be01f06d48","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.354eb695.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI16PCRA9TVsSAnZWagAAAh4P/0wZLmmoHXNl+iqas/vf\nrRlvLxhTOxtoUPeucNepnb7qg/SyaxaZ5rpBc86Kuvu8RnaI14QeT08CwuJ0\nvKI7MOtpPXvoBk8aSTB697aFa6BhEFtyaB7UkNJyhwa0NpZAn1QBemhQn+XL\nwRHoCSNOj9JS5mwtQBr8/aOCOAYR7XuJGwvM56elzlVp5MP1w2bA3Q2lHdDV\nCU7Smmz1+tax9mxnmoWr36WuuzbxG/V8LN0ORuTJOO4H8gG23OVG9ysS4JeE\n7fYqQq6r+O2xc/xmxgJ31VC/FDukSFvNTUpq8Y3SyiIGsu14UO1cnWaYaunL\n0YOWTFSm1HYcfeiuvLhhS79hBJITC7FgAHPB+lCGpTCZg9XBaRvHNax/HZDC\nXEH9AjUpGMKOiigfifba/2X6D9sq+nHecfYDQFrcUyN4l5w8dVA8wS9MFKXv\nvXluEoIPG7hzprPdHJUBJf3i+NAjblMQh3J4o1wXX6EoljTSMEUPRkw4KaOH\nSKDxir771GHNjy5oXA9S99ABbr4pnNdqWaHOOKxY3R38p6IPAtggoZaLAGyR\nKFaz53JGskuSMCMFsI/QQG319JYqLEvWf75IyQDdnHQ81eZcjZndGXh9KsKA\n47n+m8CBp/d0zLNo6RCxEV5fEb8ngFthapZJ6aGqX6gAsj4zpBBCGuW1suGR\nEGdt\r\n=SSt7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH7S4UJUUcGRqxD3XLScgLfK0guJ5pgZtIrmgxuJWA57AiBuGxgxsOsrf7Qzx0BOPUw0i6aYbzDJa1/ijdiLyxQKCA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.354eb695.0_1596153487217_0.4809976801154212"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.7beb236c.0","@material/top-app-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-D/IbONtLjbUX0DJEdQKCY8opFByFvj0E1w2v2auii9WGBcv1R3Pv6ecis+o6/JphGx6ehXrq1kBfJKmx7SwnGg==","shasum":"ab3f76e3217549b319907ce6d82e3485a6e6ec42","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.7beb236c.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFeiCRA9TVsSAnZWagAALjIP/jJ5t+QplH6tNtBlzVv7\n0miZkOt4HBc7kKoewEbGOgNecka351o8SEvU3s1+6M33ZLAvS+uqkvEcpzmT\n1Ntj2JnjL0FZZg5nzcJgX1xR3vi4DEc/AZKJHC+jpstyaXwXByXLJ2y35Zzw\nyhnnCnPrnjtb3DHZzZw15yysq+RA0CPLvL4flU4BC6JL23ph/pqtCd4hN0L2\nfmt6PWjJsBqJUH0uvb76aAcJzJy+qNwReTiNYWTtwb6O9kuejTJXk/sp1inN\nVSYY9bMI9q8Nfdw0MYFw3dKWVJkR32z/WmpVqQvrF3JOVX6F/nVG52euafaY\n/u7J8NSvyu46I03MyRLeR/F5Hkns2kARcP0B376w34YRgwQCSKmHN2R4QynV\nMmV7ZNISbOJvP/9va1KrrltEA2DLr4iYF7SoIhHbisVLuiXntQjvnyGU+E6s\nxSf90modGAIyCMaNaF7cfzaO3JCyaFv2avEY4k6eb4LJUG2fnnwuSMXeWHTP\naY248RqCMhye0diVflBt1xgJ5uhO4pDoWHRsAbvwyWpVi1rcvcoBHFotmAiX\njY1cyupDJvGGnL/uy3XGpeVBt/9Enzb/cxx5Z2eh6cG3jzx+MA6DAN3kvujS\nVfj3n/HJFbr0F53m6448fc6gjj9QE6r2/pXht+dXbt0/CXJm8CxNsePT506l\nGRnQ\r\n=hfrE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+aZ5QzMTE0xsZNTJNE8L6ABeQU3w1bY1Z8bqM1pkafQIhANHmFTCAbs6rgJZezl9Apzi/ZZaKjSxZ1LrVZauUnYri"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.7beb236c.0_1596217250210_0.3799404384274294"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.c44acc0c.0","@material/top-app-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gbPGLOXT5m0qFvpoA4Mji6g9xgUGeyKpi9daKTpWihCNE4UUtJLnngYeWIFH33zNDynKY+uXaHJDcKrlmI8L9w==","shasum":"639f9f207b01dead6533856f309da9ced54a9d5f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.c44acc0c.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIj5CRA9TVsSAnZWagAAkJAP/1H/BKIu7FhwDZqgeX8/\n6R8K+e84alJsVrPy6v9p61fDCth7JfGAvoKMuAXSLii3po66XnKtYQhKy5fm\nz+86Dfj/WtJqrFh8A9bgP9sC7iYkK/COuveXySlF8O6h+HKDsL6CZTw7ykIT\nwldsmncKigkV82i3yEFKD5h2KqLXb+Odzjas+2qXELbvBAedtx59GUB8zAg2\nX5mhDo14zDHv5eAqD+vm6Ei6Gopc8s2M53MkaPO8q58t4BzdgxNh8JHVpqwP\nrF4rJUtQCSXQSwA9dTZq/84C9XL6SigNSjv1e7LS7dx0XCpHYD55i2F5rzNw\nAhhJ7o9UMpnA/DfJntsyd4v6MudG71KoebyO0GPuW1PiH25YVG4wUProhgaz\nZobjfWFLLWroMLU9lzRIUEggMv8Y6dcyq/PTnbDtALrsZly0RzD3+N2HdYAw\n9ykeaBICy5RQ8nS4YX3b9LG0um+HH8VDvE3ckyidRA/q05wltnZzBOOzZ7av\ni1pmkTuWSzhhACSu8XV0N3DGUI4yhb8D/qkymYplXui6/xv0aH+lCtpda0zJ\nP0RUhyzBURK1hRq5PENAFE/GYUCVVPM6cfut/wHtdP4AQS4OhlvbR3Zj9euj\nnQEsacrSd9YqeeQF5gkEMdR727tOwqJq8TbHYsYlLfkPQw/fJJjMvkabPrxO\nBOv6\r\n=4b0M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBFuQu6oGivLHtQLnc8JNMoGLzVnER+qxz7TImMnq0XwIhAPUcSpvIubZ0B7VPIEzQ8xnyzHaFy5nYDzfmwHg4+nZy"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.c44acc0c.0_1596229881485_0.2011391617475613"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.779853ff.0","@material/top-app-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-JjJHao4OynE8hWCwEAkoWIp/UuJGFvj+VfFSewjIVoVrMBO+U8FevMdH2Umzu/qvoJQIkJa1kk0YJkwKBVRPeQ==","shasum":"8f352e105f385c81644403bbb7b452ba9b51cfe4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.779853ff.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEgiCRA9TVsSAnZWagAARcsQAIjiGFtSC1LIYx5Qe5TA\nAzxd1L0ALzGVZDFfxeyQyazh3zxdzdMLPv/fT69aGC8A2hy0ir+bhQ3oQq+g\na+rS9s8jI5BJNhjXfhY4sIJ62PD6yk7XBSWK6LDGo+0X2BK5uYQR7qbrKZlk\nT6jDLGtUbtII/N3Kw52NaFGuHOkaFXxoaTeDmZBcir19pQz0OQcGxJI7AblS\n7pQm4nO54pUA1/rpl3T2x9Cz0eF7EZcdzeHg1XKrI6bzlt1mEwPdSjuULnvc\nadovJTDMyPiiwMfzC22huB7tlBCCudGA/GXpVLNWlJ4ECf2mpNo3zFuzr0De\nYP/KNd11xG7P9Y3XeTnfigl/R0UOSp2msUZSCd7SlS/ovTnmGQCD1N2HPC24\nHHdNeduIAeUEVmufx3BUj0NkPSAUvnVvPDoPD/AE1L5NSSzfsoDoPlKRx93o\nPIGUvuMuvZ3ez5uLL8/SoSSqQ8hxg72/1zxOwsNa/pkF+/zFp3VPddJHW9Pf\nTwsLSCaFc2iU6acXl0mZQ0604t8BX6u7cD4bwcqKIqNarYzPIONJQA8vkC5d\nie4JWUBV0yU+acEBT5XvBc0oUnjqniE9Py18ine0waqdVR5tbTWfbYGgLoju\nP+qplqmPpmVO6AAiNfhgYwGcUJf7u8OmFzD3mNXgifa/jU9mTCleqRc6w/Oi\npn9N\r\n=73fM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHo+QrwlSeC40KdvA2ryvOPYxjYVjmZMnlnCZpPDzoJ3AiEArbI21Vm5tMoziXF1m3sEickymJLIs30X3RQzkC1LwNE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.779853ff.0_1596475426319_0.4543601499880514"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.8aaf270b.0","@material/top-app-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-n0+Cm/t3YzF1eD8kBKh+dWOeHtoDl92d5K+6zDlFtUDA+rju31T86V3t2s2VV+iUjadPeU01MNJZN2DDonn6qQ==","shasum":"1302e64fdbbf74bf628258541aec284ad23ff02d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.8aaf270b.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFo/CRA9TVsSAnZWagAAwj4P/RXu+UvlE8IumhMxHIq9\nqKMaB0LZqlTaHoriTZfMJuKqzVC6K88vBRUvIwhe7kIWc2Ncp4M66Pr2slu9\nxUtNosqZhqP786QmZPz/s5BZyHMwr9b1WQ/v/k2XDw64AQos3K3uAJJQfy8G\nmTcoby8th5ahfr6M/zeLScxe2VNgKA10tRmlzpC96KlSoEaGlXdvULVo8yk/\nCje0cCyDyiH5Pd62hPtPU8OTpdb9DBAUyyn+8eobF3LCmtJxKbuxwwlw6JWs\n80Wk/WO+Q7maoEiibfyGaq6O0FlBshnRTjeCnniao91XA3JMuyEmeY+tnvI0\nLOfwkWMO98kNulqd8AAKlLdXqKbtwlXgt/JPs3JBUTbKv5dEQdbiEMg71QF9\nHcJh7uMKXWyrwBjtX6L5AMCzSArXPWTRFn6BLQmPvw9BCvDyv7Z6uAOwUjlJ\nJ0w44ROTGqq6j9U2vdn4YdePwZqkXhspBsTfM2rslrIv5iM+sC/rrfWcgjdn\naJkVbb1UHZ1XSb/DhdeMXqN1FO/me+Hd2gO3RNl5vBdYocnzMvtZ+owszNKk\nBdOMX7hHfdz5X9Zq9kNOhVp1ualxrKcBYiIAZCuf4wQKJIsX3YtwEmacFPwy\n9kj1je6J/WaLQRfwv1z8UivSjhAUThEcgziMueIqTRqNB1HUX06VjeOgxn5o\nPJEx\r\n=OpUm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFqZFtiTnSuuzEODaC8Hy8u7pY5tiiM4SGvVEJJBEegsAiAuwVfT2tKNBKYFvIpjDfzca+krF20OIf/ggSnVkUs4PA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.8aaf270b.0_1596480063172_0.7617580422346864"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.5cde9f12.0","@material/top-app-bar":"=8.0.0-canary.5903d39af.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-HkWR0XsCoBv1xOAgC7/twAmZbfnuAYmTeHSV7NCzrQ1VeG3GUKimz9WyG9r+xQnp2r+lLS50HHIZnkgmmHSAAA==","shasum":"a88d3586acc113fdfb64640393d525080f5fc498","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.5cde9f12.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF8ECRA9TVsSAnZWagAAjksQAIEFhbFhw99EecZkyrNE\nwa2w8mLrtHorpwmT1CzKOUO+qw1O90s6Fxs42PtOjMVlu9Lkj7CNYE8hQ4ws\nvireltLpMl4gweDCJezfrvm6wV+GmSBGPaT/Or7U7C3BA/Qcak3mK7Kr47+p\n9HgrDXaqrfqmbEyhP133pumNuUKHpQC2BtIjBFkQlpaNPPmOY+ypCyiYxokX\nFmZlOekdk39Kk6Tau334jxV/CWkxHGinnmqWJvUKTckKwYfTCTNOQf8utj0h\n2vJtVO7t03e4WcXyNmuynx25xresu/Jk704fw3ghbRhx7ibxvELzoURclGzS\nx8bYhta8ukVrW4j8PMVtWIT8IAWSGRFmGgVcOjoKwt5VSdXc/VDofIURoHLe\n/NvR2lTS4thj4oQ7M9MTONsQy+d4EaIpBzWZdFnp5mijDFq4z33NXyhkXaSM\nXXmv+wicU81EgnMKuei1Yz9p1+lFkToL6Qb2BIBZJChCAtyU/dq9rPaEZ04Z\nU+HJxYeITVy0vX46uvxuJKv7Xue1ZkLntMfMEvi918M5JbemFG0WKL1faDwO\nZVOXKQDCvwxSIZ1IaOcLGks1u6rhRzUIuvrgsXx3BiLMJNSs9e3ynUBcjxFR\nJAbwyUecoTXG/EPdb22q4db5sdz1dB/oDwSBZoo2HfSFs9imG2MQkE8RdhJX\nLaP6\r\n=WVgr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEFnAkaLkBrIU9ogXLALpIS8hdjuNWd0ZFtygi38XkoVAiEAqrjbvaGGYMJL7bSFtakV3pQqJX452+B2IaZIO29JoKY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.5cde9f12.0_1596481284286_0.5540564172583164"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.1607ec53.0","@material/top-app-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-A8eH9Qj6kkYynTWW2sd0ixb9D++t5Rr5Zw9mCc/8yUqCnE1mtAyMG5GX3cfWH1qI8WzrktDVG/ZRRQ9emBUS8A==","shasum":"8b1663a5ad1bdffb6fc93d1520e71525ffe728dd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.1607ec53.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGm2CRA9TVsSAnZWagAAAxkP/isnzvgu2o2SZpDmQ+W8\nYItyLbtfP7n9cTiEX1GEfxhz5gJRAAuVl7eb9bBn1NX26ExAQNal+z3c1viC\nAB9mbt+q6jzIXHijGuxy2pH4lVI6Cv6ZOz3Bb106dHiDLeEyCqB498kbhzuX\nJwsiwJeAZiITOAklnX2N7Qh/rnC46YSuVXzXNUCvD4xy99Df3ydXUYMMoqK0\npc1LAqm4X8dySuZFI+RFMPb1VdWahafo6VzBsZOVT7UjysBy//ioB4pT7n7X\nxJ/gDqAsJ8oY7AKZLSlu8pdPjghlNri68BRehpl1Xx9oLNQy08o8gEQkDJ1J\n+HrTT9huunQkRW6PtaYsfl0r2JgYogBP/TxMq+kosgGNG0j81P3QF+7Wi4wW\nDoGfko4co8foB8C1Eoqoh4JTjDEfunJmbbaMbK6kUtd47KD+FH6UFbyBEEaj\nGusXHHHbeC02ExgP5mhmtlue1V5In4xKg8XPX9mYog4aaNf+0AbtAVlRMkVr\nfv7h+87v818CsEstRyGkmly8CvqvTPwVHS/KcQ2MV9AMYDdYjwU1wTLGtLbm\n9ki0aoJyPSZdjhdtRfN17TN07RtgrsK2+uehUvpb4qYvWYtZdh3C5QApgKGV\nwW863CPC9NHiKtr/9el3iSkvLXwCc+O367VFV8XutgGImvo9oMJ0INyn5vpo\nlE01\r\n=khID\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDye4PRkZUXD1PoIvZb+HmeiWSBT5IKVx28JIlm7bcWGwIgTMNwq77cKfQaGiHfAPGBQg3MueHQBgSSEEWc+Iy+C1U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.1607ec53.0_1596484021764_0.2870844111901296"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.678b30e3.0","@material/top-app-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-QrebcOYQhUZQ6Zl3LSkREw0E1rctdoLVPpNgj5LebT74ET4XF1Sbwh722rvp2YXNRnoeFHjQBXiCbrKPHoBzEg==","shasum":"f4109e1204773cb3229fb92d20c962f02f4fe50a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.678b30e3.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGqeCRA9TVsSAnZWagAASDsQAISleEFMPgl539Ck+SVv\nV1/EoFMJUP+/etn0CZW6cw4397KyVZ9cWZPWFwxrjQdf3GV3iz3W5OylvWoZ\nfEm9D7OKXpArvTfXo4Q49g+Dg3bRFOXNzC9VL8D3vuLE+LN4V/xVfv5xrvto\n9IbaxhmGOnosK+KVXAI9SkTmyZ4TkZDg8pZ/+nHepu2np+dH0wA3uwRRejbN\n2BYE7ktR35Mq8YvXhzp5Y/r/7aqmpEGtP/00itli8+OxV6/DfFfuBiH2u2s8\njKJbmCDVrHtNOn808hIa5qv23Cr9QDB9rU5QBDLWxKOI0IfziPe+Y2A1vG+4\nsxYiF0XBU2dnl3DfUYMHf3uE3MeXeF3VMCnl7N1nb0vyNuzIfV7ZoJ8o/m3B\n7Z9REG35CfYAbrzTXn2mtLv5i0vx68kl714vXq4DQVfXpmcaQnS9uCPcDjH4\nEUMfrZ0nNx8DmHqr34sI32fr+mKkSt1cyKG7cbaGBU5lxrlqGNZjQPsKAAFk\nLgoIg3zu1CmAimJpTRIlYVZAi75mXs8K4ndNHjcHae4ZYK+zPkVESOWt4uiD\nbhdwcm6FhZ2qvl4AYa/MLLg35Ulh1IUIrdb/HkA1pD4+Es+JYXqVAwdKSva+\ngabR2rBeq0bJYaXGMLhIoTvAVt2D2lWg144lyuuLHUEJr/vjeECy7kIZ73J4\ndY+O\r\n=eA8k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICqOCZ6ryNbxr8YDwmXz3YuW6GSPvqs4gJqEqjZLLubIAiEA3GAzHi9kLC7S/6Ohlu0t3XeLEn8zQ4jSM7dn4UKtG3o="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.678b30e3.0_1596484253926_0.7948853431741876"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.18.0-canary.21c55569.0","@material/top-app-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-TgFs6Zy7GEqyMpd7MxykIhR1uILqFML+26OpvF6k7qfBUTome+LkLjeQnnL8p2Za+zdYcK25PKBGKUXRaEp0bg==","shasum":"df28e68a77936c8485350e160c3f51c64fc8a918","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0-canary.21c55569.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGwICRA9TVsSAnZWagAA8VYP/2okxyf0qDkUNN1XrBXZ\nl7+uIcZG9mTsSrXYtF+9MQmmyz0yVQm0JnAqMbKSLi2sHA7uSxsfFEKyn36m\nFn7+E5jHvita46KAoOhX2jk+g7bFXgeVNau6842U9AWeLYuN4hXlIisdhaN4\n86HtWp4OzbCkU0SPDNUv+7dyU6ZOXL6nljGUANpuukcEPcD1zLZLm8FemOcJ\nTjggpLmS0rPknti6+vBbX+tf4qBBln9iTxvqe8E+Cz2e08oDMBRi9FSAaylv\njNWQ5beU+nTfZEaJxJtwpIGkoshx+v8hF50ITgxQ4n7uQpQma5nRNws/0OUW\ndbD9psVdeD4AkHEFQGf9Tgvw9j+nzPou7Dc1N/0xO7nfnRvHJS0YVv+iQDq0\nmovs2aKCdxmMTEev5MWIfFcFcsd542C1DFrPm8LMrusL8umD6YMYPXQtLkD1\no5t4AVHBMPmYvJjU85uEJvY9whuwgnwb/N6WeuEvK+axSzN+5uuGp9bza0nv\nOSPkES3IYQdLc7QN7CYdMzy14WI/6k2x2P9PVeVB8GzXP4V0cKhhQk5XfyVH\nfRnAAIjtFZh/pNteAVwrTwJkVY7Lb2efV30fDOrHsLQOSZLizPbXbSKdzsp7\ng+tKJiIi5fl9WKc8OxCBvKA+u0TmyCw3sc7LjKYGUZ08qKAYGmXPYl/IdMHK\nVNTL\r\n=BYlt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHZG/16QSdvs897fOkNsnmnEJGupdcSBh8T6GkEYHg7IAiAPWSpqu6UNXHQdPzRGd4txgHBaUnYAuBi2/DPiALv1Lw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.18.0-canary.21c55569.0_1596484616434_0.7381935257959118"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.907d4d7d.0","@material/top-app-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-oO3YqjbORKbmPySmFDJaZwe3+VBBPMZUEKU/J4eFqQJ/tX2Cz0CS2EfJ5Cjor1Eqxa6bhaync8s8BzQ5189l8Q==","shasum":"88ad933f576231a7bea5051a174105870bd5e82f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.907d4d7d.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIAgCRA9TVsSAnZWagAA42oQAIoNGnRgqHI8iPoWtw5o\nz7siTbRlgoJl/c1L65PD5UBBtYjsBKZz3o5v7/9LSUUHpoPXp3LbhyHxMtDc\n8okC1XKmeYUQ9Rs/avgf/3UtiqV5At4T/1e67H5JYK0JYynh3NLC+pDoyFOe\nAklEkBARtFgwdjlin5OV6MEDJ9klYvoVe2P8vDiUTw3fgHxTpmlSEoCYPW/4\nP7dBi7ugn+K/Ooam0hsKzS12QlOo/eYpPP/QT8D1/UlGMyLqL4Gia/DhryBA\nn4Dqqkoq1HA7Y3K2Fhqp68nXriJmpruO528WSArmJNTrnWe2aMSdGxqUdFwI\nnlVpIkd/UWiDqWWjT/LpnvuukSQLny39ADqTJ7SfOpqaEKzvQgJWqvD5RhBb\nJwMnJj/86Qjlglxztp+bvQ0gqznWRGBuI9hx3AqkPFWPFc/d4neb9FCGK33i\nFcvPTz55gzlKYkY/6y4pACzB8ENNsds0sMVerLqjFo60PzwwGlcIiOvTj4C3\ni7nALQPsfpoA6faM/SdqM90w5pKnErVNCDR3YfL6WIWdAWJAQ8Z8Tla6yT+c\nFaUA0R0jS46jb9Z64j8iDQUnD3nyWIsMsDl2Tp+zK2x5BdNhgoZEtjJeI+5k\ncUSQ8lCHu6tuNA7tmYpofKGJk32ajAapS/JUMIQnIpo4RreJULmHfPLzgznv\nMgem\r\n=Qtv+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBVBj1+qYxbxGTDO8Kn/xVVvi1fM6TmUGsWmOYey2NvFAiEA/PG6WkGygstWN9YhW5CRO/gG4J5Xe4A5CYMPq9uyxqE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.907d4d7d.0_1596489760497_0.5886449182909681"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"^0.18.0","@material/top-app-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.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-fixed@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-vB8EAPmpGcMUb+uyVFKvvdQLElCisjDU44idxgv8WaMAv747h9VHqVkgHxIOOXGdPvyqAUudBBjATUFysGaIWA==","shasum":"b14dce033cf4d8eaa0322a2ff3ab39e22824caba","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.18.0.tgz","fileCount":11,"unpackedSize":29678,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKICOCRA9TVsSAnZWagAAgBsQAKCP6qZTJ5wcQo3bvART\nL+3MdiEHVwicqYgkE5alFh9ht5Ee10is/+Sae1hiSnCXHSfYUigeI0mtTYlr\n/GrVZMsBPw6BCfuCOfL8MKZhk1OZvx5dFO9tggY6pk7Md20OlqS6caJUPqcR\nPiilBtIVQgnPNc4jwwGFNY3GCAtQlQml96RJaHebGU6UNf9pMd4/5ydg45XK\nEsoRAiZFnB/n2GAEwNaLBzgyVtAV9Eim99sk3LPdar56OkWxwGo5FjRrjgYA\nMGZw3WFyYnj//tbNVyBUeBkVTqIwIUqXvmSPy1VYePdgMikYyqigde0OM32e\nCqKrcpNSUSqgaLDl4ZOTw/NB2z4IzTFOiGnYF1zQYhPNr1jCJSA3ZuTm3tV6\naJbukjrsN0QbHE4UqdKKcM1nDO1ekuCfSXrIII+kysV/vNdCSh5+wJqwKiyG\nB2pLcvEpn4xkx48k3RTwbY03pRKVOv8AQHadzVg+6tTsgKAIdHY51yv127xL\ngwryGjgcy5swnXLsjJtRgdKyG+VOTnhKm6VXHGT3akcffzb9AsWlKpEr9sdc\nvJ0/epzYJG2jyxw7yZGbOTBPCEkyC0EcCUTFgbnTIzzOpD7u/odfThP3rGfp\nwMEAPa3ykwQvhfkNC1I+iElq3oSiQPm6fzAkT/Ukj/fQA4D66gpU94WSeDAn\nyymT\r\n=JNSc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGnkMJxjeg86sEKwP86xOznFsjnAtI3SwyFwClSYgvrTAiEAvC44+rvbD/qJWYt6LFM/sH1E09m34iRo8OtqSv1grko="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@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-fixed_0.18.0_1596489870221_0.31384489765011003"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.f7958e4a.0","@material/top-app-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-GeWEL+7U0b54c5411Vc9rdFct4qOdJ7w0ZR47b0r3netutqViZCJKXBXiMQWSzE0apHzhxjH862NMxv1Xq+N1A==","shasum":"1bd5ef1d51aa7605a54ac44fb67622970ee77316","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.f7958e4a.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMLNCRA9TVsSAnZWagAA+bQP/iVsiatdvSFtuCwmZtr8\nYKhKTf3Up126Wg7aeqgNsKUyEBUEBgReNyyahiT/sT1SNAsEiANqg1Ee1C+N\n83ha2XeRMw1ko+zhOX7rhNwcvSIdgskynIptePdnyILkSsTXbMeQmef35Y6j\nCOsl6mkGx+1c9yYKTMVyaY+u8slFfp9tz5czhZPFb7ZLNTedKLcmY3MA2xtq\nsYGzQnfhHdLABxcThjlMICB0aL6kMEkwG2O3VEPvp1v51q6bjAC+giME+I68\noWlw/Wojz2wsd9rxWxojetuIZY/e/qa6BBn186/UZlc5Y3JANs1bKFNwhQ9b\nWSxcjgmrXIJHkxT+hsJnBvk3yD+XTDkp+LADLFbXZdQWhixZ4iCcRpqW/AHH\n56eSZ/NtQ0AgfHZjfFkufMCm8+GWg6bPa2AN6wP23NodNWNZWQwRiQlc09Vb\nXH0reFYmOkajy5In5tcbWmbA6gk6dIk2QVoGid67jrTIfutfhIEba0RRtH3l\nivlTtlQkxmEYRP8e1pFDWIKgUDGniBdpZafU2100ysVVGXIRTqFatggoza4T\npOtL2CeUGdYEtzOYYK1hkc9QW9vC82nBQjCgdtdk5QjO5vJv8tiMtgge2e0M\ncHChSQZs4JERi51x8siWIQk17a3bQDdYiEjEdgOdCRGNoc5mjeihx1dEy2Oi\n9xzL\r\n=QQrf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH3Xl7u7EjoiDVl+XzJV5N7NFBWtouDkQpNbh1RoBiY3AiEAwy9OxFzLP+yt3rdKa7h1AW/a3LAcMSu30HDKCRJxoG0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.f7958e4a.0_1596506829003_0.036493634417058995"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.f8ceaf79.0","@material/top-app-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-xalWb5evfDVuGlEK4vi4RSti2n/UdYuXDMdxyltzPPwjShXjlLwUXFIjbxLXZ7tUikX0AT9iP6t1Yn1Nb9TbjQ==","shasum":"a60139269a9ee4c7717cdb9a7d4d6e12f5ba8044","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.f8ceaf79.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbSCCRA9TVsSAnZWagAAwPoP/ROIKP3vhXTz8Xbc48C4\nyjqAgK0QdfLUNGNLFYPdw5bqVN8KzMOaCGJasMKj596bYuFD4TIOKMhJvylh\nKULIV7XonlmcpN/RXqCg0A/1NNGXIPPDWqzQfXPe77VK222cz75tVwGjNn2z\n0GwtRicBlhcUuQpq1KnOkcxFgrCbjVwSR+nZi3wokkFg32Tl4ZlDnonrBa0G\nYLkTv4QLvGmSsFlZiEJ6Sc0SlLye3vum7YBvfarJQlOO7slU4tnryIuoiM1b\n+01AS2T35lbaB1eZuPfuPlDv407UEHJiXT6t3VljSsmjWSqoXpIROa79JMZR\nkohAjdSZJUNnXC4z5MfQ22qhse8Gcmp0a99eDYcB+vExi4GNqa2hSIYebJ6w\nZnIdqruDI6o6B43+i07e3rOHYocTinTOCYQ04tre9wevOyFm/1DwCvPQw/VK\nT+eddggxopwLTE7YMqqFi7z6NDmaWQ/i3nag2JMmJyJA+FgHo3x3nwLDHbv3\nXE7g/lnr4D6C0bZkQT9uFDZY45OBq4Ir3KUaWhDwp96QOQnLM5gBc5LOOCPa\nrqi+wmX8QEecEeSsvzbIleGQyyPs10w1cBmPUyHuKqtw5iYrluHhz4WAGd2G\n6Q2oOGc6id/vwnOZwCJxwGxXeMZQHrif6ywly4sppopJp4SU/qfRmMLOs8/1\n9wLn\r\n=zh3e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFlUTlLbR/vvpIa9Ch6O8nowXedP2Hcon+Lujplx9qPNAiEAyWHXF5kKZ9rIsJxXUelFb8DT0q78kbuXdXbvpN8DhSE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.f8ceaf79.0_1596568705716_0.8418466714054473"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.6b9e385a.0","@material/top-app-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7flP3CGuNzj8Un6Csr5AUVTxuL1unuBHjV0RU9CGxXOTuM1SQJdd/6PBj1J5oJzuhorN3NbGrz1b8K5Xx1AGUA==","shasum":"752800e6fbbdf59de846d13efbff3f50318ae553","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.6b9e385a.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdNfCRA9TVsSAnZWagAA3NMP/0s484sMA2eBW70bX23+\n0w3u6nJyEnhrb5Xr2LDzvLHf8iK/Fv89xTyocSY0Lvl71kSTQtLcoLxbQmOV\nvhe+U8pEWD9e0qLs4SQ2oAt9SgzFE/Ig+y+Hb8+jUawFNHokDw8vpYvLk2lZ\niPt6XcU7Pp0qcbvhJ2myxpGCHgnUA9jNAbS1dj8Dl+qStDXgOYXdh3XNd0VK\nf7s2KD6pjqEUr+u5Q+n/qy6MXvoKwE/MHgCl/3lbq9Wuzq0JGYimiCYQUST+\n3VugVKbTbD3ipxDp8w8ppJJO7noUq72iUj3qMm/A9bEeRK+R70wPxn03Wt96\nTJk28Hi6QIHMzDU0cQAfr6I+cyAlLXGd5CxqWigwXK99TczWG9pmIuYq/Xv3\nDzBvma+4c0MOdWYVZ1XcVAgRMJ3BhEbgUVFGty+OuZf1T0smEju3oIVrjoEC\nrnoqj4Wm9CqtlQbJqTn3bsL7rfpXCK4xoXIZE6p/QUR0T6OsnxOHA7vXLyyI\nxDdlWPJ8z4tZ06xoy1zx2WfMRniU12Gpprwfv1pdFWY5L2EDw9F845pACS4O\nN96/CFTLyICV5BiVGcHNxWreQuYyUibT1dFI0BdtDndpBua/gPMPs8i58Uco\nm0G2Fevctrh6EnJx8vN2Ea29I+QVxQmeIKyw0xOZlZCrHyFOO2bhtVjkxMvM\nWN7P\r\n=4YB7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBO1aGoP+F/1GFZymgeqcWqbRiX8dhnEwD7Awaz2LvrwAiB/wLuIykl6OT/t+xBebwgr5D8zrMqBkHb/RTxj85TnhQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.6b9e385a.0_1596576607395_0.5739201111966523"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.9a7e6d2a.0","@material/top-app-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-cgUx/VoUhNHSfHSsDZzgdy/u8HBNyxhJuVOlZaYe0vbRuALauids4+bmQXWeIm4aa2gV43YQcl81eFD2pM22Tg==","shasum":"6bc6d29ddf68691325aa9219eb40053674e59b41","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiuGCRA9TVsSAnZWagAAvjQP/1dk48JRTcpESqIlBa87\nJHHc+ZDihATPpxKZW/XEj3sJ1e0kTw7eAYNUVXvMysFmXEggkVkbsmO++lx6\nxMw3h0OHqPE7vlV2t/cfJ0TgS70R5xehOyYaltG8263h8SutNpwu06QWhfHy\nsmCCP+5wtRdW20LJ4knrBx154oDJoK1Bt8ECkzgH/X1PBbOa3/2BqfdJ8S50\n7ECYAPHqNkaMA39n8DXlQ3nNpxqZTbOjOI/u4ixmVicKobBRDwi6fDJlDqoH\nDcjCzxsqHHdaq4cgvDvtrLPi0U/yEwmIVxE45KiNZwSjmcK6lUaJGNmd40LY\nVuENOtsNS57e4Wtsh02g8+PbMZMUR0aKTg6ytOVDsibv0MVT1G17m+3l7Ecb\nEV2HR3bHEmeEKKuZfE3vq0rrklNNfVujo6pkB908O8dgJD59t1MsEQXVSd6a\nd8N7+WzGIAKc+pu5wreOSeDIpPRTKQcwKMFpqq8pPorEx0NJry8HJagZgUXX\nTDkpzKOCF/hyeQusmNJe5P0BKBoiXBaxM8REzFBg901HQVluXhRuNWfyvcw8\nJI6QS0qgezs8n0f4R7WBSZlCia+OuXFK6ZdYG9SjbLmDEbyEmEufIEf0HbcT\nXR9R0yJsJjId8ywFb0ooMSW4Enm5bS/8as2X4PRk04kBLgQQg0KcWKpDf8cX\n55Mn\r\n=nvbJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDRL4g9wP0N3DTbqCHfpeQ0GJYghQFP9nFYS4L6RdMjWAiEAssU7e+GQ+HMunk/+v+7KAC9HSMB7Um052Zv6TuLzQhA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.9a7e6d2a.0_1596599174208_0.0704678390047937"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.188f3f1c.0","@material/top-app-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-W/YMl3Y8nF1x2xPvSyBenYKXER3SoqujDtJtOMpY6S09jUrKVQbuXxvn6/7v91+EyuADVqOy4kkOmozOvzu3Kw==","shasum":"95d41db3defc112b3fe8d740671cfb999771163e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.188f3f1c.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvbXCRA9TVsSAnZWagAAWfgQAKIE4mN2A/r36gQu8Wlz\ng6iNYCQZoo0hwGODzQ7E7Az/Ih4Y1vJSuidKFPj0brG1qCo3GMIyKYZ4PUnb\n0eIxut5B31vVmU/py386cOcYbLhTKfDEvwDYJ5UUty6pcy3hg5oocjI0JBV8\n4st+FU3uw2QqE9/R84oR98lMEY09HjtnJD79v6p11msNtZVYy7Gwc62VKfmi\n/Aua7vEgcUKh7MvPhHzGtgiaBvrFSwxlMU0/PtP0ZcR3dI5IAjZhh/Nm07gp\nJm5Ni8aeoAvPMvEPdazda34qD4TND6PlCMgiGDXQfaliXr6ffuw0B+4j1aiv\ntJ5RMzW7WWpOWqo4AyN+1xTOi82dkj/hdDTx+XIkEBxkMa/v49PBeOM396WC\nrIb0HVGwke71V1b35zIraX65s6ZlWtlu9gOy5lwf3qHysKEjOxTI4+5tDgBp\n+cZmLwZQ0II880JWdM104g72Yer/0KT2g4gludOmlbFPnK3rU7ImlQzq2C/I\n2eb5tehJgitex9oWWakkG1jonRFlm7YysshvIcct3rCJM6DYgpVY+UtD1+Q3\nXat9hn4vgKBs7g24ezOH22qWeoeNqdWBT0zD3K2NMZp5HnwD9RyUiZVhSmLT\nC2+BUvAl6wT7e9w5BRa7v6JhHDYgXH2cdsFQcRD125YohPwLH+R5V6WZHl/T\n6dkS\r\n=S/sV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvcnEWhx2y78Ku4gH1VwUQNIMwJfNRpekyOE4rppGYSAiEAnRBW16F0x+Gq+kqNtPKE+h6XvqMJsQec458LPiYhOpI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.188f3f1c.0_1596651223025_0.27752307301089685"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.b6106add.0","@material/top-app-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-CQyDaOWhyGKakMsLZ8jAKm6H1YPJc5IiY4jAPQlHrHSE7+0NtCInHiee59mRySnOfMGmEUxw21pWq15V/HP1Iw==","shasum":"4327282bac9ae71dc2836b418496ec0fb5204d4f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.b6106add.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxtlCRA9TVsSAnZWagAAa0EP/Rap4h40/1yerWlhB/nu\ndmdKaT75Hr61JVSwfr96UjGWtj5xlxJGr68QynE0OmgNOwecY3Ckl/ZrJ17q\nPP1oCjldTkSyJ1LtjU1QtPZ+G3JypTX2jRnZaEB62qQWqrdjJqmnNrjIEpM1\nP8Yml/+0Ns64eybbBPF0z4NkeyulpbUh3ftzlAbxSmlaSe8jY5I0iVZcp/0I\nMAHuDc29h2RuARJwZZpyTY0OkiaYL8NSCia+MgNQGUfSfxon09S37zGKGYZL\nh3GvyJZAjtWAAJGyei8Tpuuj94H7/HdphvUOc/IWoL3/5hbiC8baes506AzK\nTHpZ+Qj7sX+M1fXgyTaxdLt7rXf5aXM2qwo8bYs3dghsYoLS9c66f6JWbdg+\nVnp7t0TN90EQifv8xmHV1ISnPcnRPclkKFvJKPffNr2Uknw0R0QZ6bo4Z2NA\noqcAIjrCmtMbNUpdZ+jCggRvT7fx0WUHQI3oryrsGmVuF3lBm1w/Gv6fOKzd\nxp0aO+WsNAI6JN55HGV51VAEt9pXpG0MswL/KGipAZHf8OvTQAdeQnbs8zln\ngpK8rJX7qteaTqvKx7o0InMFH+FeTKHwByIboBsPzvBkyTxco/SSyX12ruZc\nyh+46NLcWmS/aTNrSppswoCNf4XZx6zp6NlYvkMEi33vxastnbqSfyPZeyZ6\nZwM/\r\n=6nng\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID7VtKNjdQ4n7dQrwQLgRWLVv1pC2R+l9/iAP7YC0PH0AiAOSctHGM7W6LLNLUwiz6CvAP1bGiQm589V3LbyR/i37A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.b6106add.0_1596660581118_0.7417440670561279"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.ebb4c667.0","@material/top-app-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-G+HJ80Bo991LaKkR4ZK77pCj1obFSHMZYLfcC+3+jXQkyMR3hcOXKw5nvzAmPy/2bye9ieD+ZCvskkKyt5Laeg==","shasum":"95cf07ffa6a06d840782e3f5bc270246d1c6e54c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.ebb4c667.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0x5CRA9TVsSAnZWagAAgD8P/2t2m/AAWE0WCkFrPihk\nttkbWWYx4ZVqZHilPDs67rv3qc5BQt4rxWWRZbvmE6KC6oQxMQfzhR/JFxoW\nrXORqHKVe8mt+5srr2OK3couwRfrK98hf1zL/YakufSnWWYWSROkB2rRKy9B\nd/LY5exJzY2bsVa+QtgRbUuVA1tWFpInkRLiy7eZLXsuN+KC+U1nDv3yLuYC\npCvcJ3Bn/aXIepgg1n+qyFOoIMSYofTPnfNmL6ozY84DefObUCC0UKPERfVL\n4xpHH4bEI3zQ5U7Y4S4QK3R7XWVrbyopmezWvlkKz3YsrN3vWvxxBzwSvy1J\ndYce14l3Zv+xzvnpkTcamVEoHwGoQpFehDLohZL4tta38SpwvR4li0uL44AV\nahj5vcoArrL1oflkUcxnSYqp21W1eihWxlM9H9FHynob0FPVma1rM9rJQKYR\nyX5ufXEY7QOAIXQRdqmZDSouOzj1JitLvuprv9ht3Pl1fxanjJmRJQ7/9AmX\nUTmIdEj7T9XR4bYNLH9kZSVxhEU1TCnku2SZ3hNu+d5dwrVHdOUJvxxavl7w\nCfcDuFQk7XWDI902Sd79/0QelVWr34hkKD0N4yXvY66b62c1A5M/y1chDpBW\nOeCGKzkU3iIk/FJqe+aUGaHoFkQcbBnG3aaE6opVyh5tl5xKG3BB114AdFO5\nNUh5\r\n=u2V9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDz1aPRoXNd4bIwM2ea1jryuGNSth+wRvPcgR8dul6fiAiBks0w5sJooeKCdODjcxhSGZn8qc3JKkZHZBT4N6HqhRg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.ebb4c667.0_1596673144777_0.11717872545195074"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.aa44289e.0","@material/top-app-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fd3ja+O/FNOQTZ5kViJUF7BqN/VDn9JlmSb3Bpvx3an9pLF+yfoJmkueEyWFlaNxpu8vvxre8RPapojrThcuKA==","shasum":"2259d0d16b830e46222bca6d9cda68756b2996d6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.aa44289e.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEufCRA9TVsSAnZWagAA2twQAJsXP4/jY32Nh+7Toml5\n5Fq6NKDeuxBlQSzJtFYV294W0fdN0EmXbB8MwU2AN2jpFyp+Tobcb22ZQiun\nPLSaHv+5BuQH8dnumKVIZ1eo+gLsffsVp9hvf3BvZhd4UvkOdqjIfIRKijz+\nOCV4SkRwwUtGGxdj62zX7Pt/u8an6EjHfGCC5IhTo1RMnkkd8x+o/sEM8mKG\nUaTYQuh4BZm/1ctzl8voA4wg8BlmzpFyit++OL43AMKcYCLTtVdDbCFOS6p6\nFI1yNW72yKEN8djg1Sl4qmEsJCnREfsx0DBEWp6Jzeyf9vKR9r98OZnybHrH\nQPf4CJoeswbFfjjsISFgYNtx8eZhyzjlHEOOTJdDMf7TL31L7vMPvZMBECkx\nrbWi+IpNIz/YNXIthpHbv8/CuMjhFlzidlBnmAM5KaMpqL2rEpNzRrZ+Ziqk\n8xGsXgkJMQ/EpiejKcD/zmKLJV1IU0/3VbSGb5cW23DmNbP6QYjkdX0UxQOT\n2dOa54DMTt30H4iJbHCHCSCjeBbqG5GwFI50BxK9KTRMVXxklMFMHBOBr2ln\nw5InNGkxt1GSdyrg6i01XxKmv98AV5dPV05JpwZ+p5IivrwndkSCbKBO8rn9\n+ml/s+b27fZ3grV7+7iXSQygZIDB3NHsdAFfpwjRHqzOdKTJdKR/X/ScxF+p\nPp3F\r\n=WGJZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9dX7N3Wq2g2WLooO7zyMfRwONRzigNfXUtyCCaPJSsQIgKf+UkIfLeKQqe/Ri1F5+yEz2yko5X+vWj6ud5ixce14="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.aa44289e.0_1596738463348_0.8916730274927771"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.e6b0816b.0","@material/top-app-bar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3w6ZhxmupjfFyiGkCnxadmqy+ZjkCGkMpXN5LGsG8yQzCP21ZC6az2mtGE3ZYXh/IC/YjR9q7xu+9B+Mm8BJLA==","shasum":"9d62b197e9a27c7f19f71fd9397dcd85838c7c9e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.e6b0816b.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaD2CRA9TVsSAnZWagAA0RsQAIdz5rREBneVDt72JIXr\n1qO+4xFONNwfPxnLkczZXGdm1JtBiYJId64t1K+6DCcNN8WBrfzt3XM7nKNS\nKeELVtj1dO7CQkUzHS9Rcge5UAzblYbGLxDvYqcqVXzs8pSpJisgW/CMrf2N\nHHA/I13z6zpBp8QT2t+/xsZzD+KlzKtEhGdKcdkLe2vWlFpCTjcEllEsvbk2\n2cO7e8vadXBcRUHWEbVS4HJeD1SVuOxhxUNZBG7DcsFGscwkabJq8iVHGWrA\nzwR4ovqb9t9SAHfNVVfUAXqII8r6gzWWTzxzd+UzEq31TxE0uxSq2cvxPT3q\n9/JyMYkJPwDekuNcKgZcgLj/IAWYFMpmwn2JTVzVptnTQCYkJmnqOq1k1TQA\nxhanSq9gOT3ic++JvWeVJsFqfaV4AcWe1Glrdo4AgNplvR3xNivNbKwrnexa\nb3CF3g8B3cRAW/PPHO1DcTKXEu4s6eNlqmf20U+4VpSbBMRkmrSKGUiCVbUU\npXKDXC4BBRR1bGS3DbnIscgH/snyJt8CTyNi4dsL+/sQZx9xz8eibDqHKRqe\nY2vSsh2XBYD14iZkDlvZtCJ601ZD0dzaZRy3ZhdJz2gU9TW5xGjmkLagsbwI\nHYFsRGLyHoIWXhmkGrns6zjeo9mvLjRPu01qGgQkzzm6n5dKtF81Jdu+A4WW\nj5+D\r\n=0hOj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCihYaSbqz0qRaGFykDoYXQ7f6lhfjT1Lp9SLrh4Pl8UgIhAOEA3BzsMUQqsO+FCV32dupE5gGumfv9kK5USp6BdkKR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.e6b0816b.0_1596825846262_0.11830502734098092"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.96d15938.0","@material/top-app-bar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4i3LRKdNRdoPzKvSZCVErs/ih//woSN22hLd2BBhTj+qb0pCaGsnLuJlLdZvRfeHfm9tpY5PAyOxvwqxVEUhqQ==","shasum":"c1f6342f7a9ade6ea64a0f2cb3d364062f9a519f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.96d15938.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLbmcCRA9TVsSAnZWagAA88YP/0iVBrahMLDv3SWwaBYR\nwKseF9gNtba4jWxxNK6iYA+sllMb9OdmeeqktEjxYD+leh7Jq4VeMz3SGJD0\nvfwiMKpM0RUCn1iUin8E0bPTf3y47KzGip/xC3LDmTsyheW837MyUFwGfhku\nsrhHcKxUAtTN/8KhxB9Fk/WQY9fb2nG+yCZzqxQHuRBMUt0ktrjGryU44+vY\nA188wcm/r8q/Hhj0TnHgWiWjlLeKnWNuySxduf8ACIUXVDv6uSfHllv/B9kg\nUyzffVn3hbXQ4eUJmyfwGLo7Wat0hLs/h3SXtslYCB6jyy95aeJpe/u1QEM0\n2eVL1K937LqVcQ3wGUP8GujcZrXPaT9imiuR5PJt975TQ6UmM3ruCRef30Ib\nGcltwjJ16IdaTF3rI6p9M3ULTlDbHFt3jvc7Jxdn9t8zvypwrLuHZZ3skYLg\nvIDLnTnR9CzYVVO6Ww6wmUB3U11quNCUYEDHyO53VacBwqCw0nkLvMqu/cCb\ntoE314zuvrO7Ziqlh2/AKfy6ejCzv2dW/38bvm7uKI/lW6d+ZpqVg2Nq03Cq\nKQfDy+ZaE758S0f+XCJeU9p7hwfeI27llU84rEhmcca/2W3HcVoPXTS4Tc5n\n336p2nt8OUVSCCnQwxQtT5K2vpJl2jJ3wh0zEuti4SdD6I+TAcTK4bD1cWhG\nGc//\r\n=2f4K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFovi+v5OxaI0trn/pPv5CbRSlDyKJirLj6X1BhdhWeiAiApHYAAvcAaH5fAqoE7bd/O2P1Qif+NsH1LeejoISfRpQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.96d15938.0_1596832155621_0.7124705359297743"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.9d991c8c.0","@material/top-app-bar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-L3NEqzEog++gnY99ozuHrAyLVkUEaYtYxNj2gmyOnSVEH84LardfDYqgKaMOdk99JXhuU1dfPJT+CDKLUUjk+Q==","shasum":"76e5129ddd99d880a36af38a0e49b81a2d93c58f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.9d991c8c.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdDuCRA9TVsSAnZWagAAAIkQAJVuN0bk0jRLMYTtrWlt\nHFFGqnL+/vIO0TkUJzEIRxV9wtj3zGOPWgxK91X578TrLCzI8VrpalA5p/5u\n4d86tEdlHOC/zkpVV8BmLpKi7BqMRe7iyTibt1TuRo2ZS4eH4AyhT9ObBxIb\n7Y4v4T9rYfJyHkML76Yv69o2nHYWTAmnKGa4Rcf0c/y8lEV2uBfU9v2nB+Wk\nDB6U0s0KDNDW7iWWAon1JykSxcC9uFPdv4DaLw0s5Go7Zm0pi1apI7AmOpQE\nYGWxRTBK/Ek8Z3MbevexT7ZAwP10WC/1AN/pfsPAP/yBeAmtcDAGNecnUOh0\neS3XBVYG7iv5Xy8G3euX6W/Amt0B9xZWmbnAJNe3tY9XcVoImRL1JKRPbTPA\nmXBAxLRHdobyVKo1uFMT85fBK2nLOjqfnyOMuRItRJqucgTOB6hPEiiCUUHB\n5RFxWv5h2pQMHGF6eZGRgkFoA86FN05S8zzIjbuX/cbV7Xa5xow5BPIsUtIi\ngrICKGyMH5CKxdL981K1OHdEY4kEQWRjx3EL+8MBrFM/C4C2KbMl9K1oYaWq\nQ5wwQjCJ+aaOmyOH9f93JaowXwaaP8dNZ2RzvFiJUyWe9MkbWcQwk57F1o2B\n30M87ID5JAMCFT4t4G71v0SXGBdw5m4G7ydDldjpTe4k+10LB1YPiOcqEONQ\noGxQ\r\n=HoKu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoHUabhhqxQgx8PlNgejKmWocYHAW3+dZ8lSLya3uuhAIhAPL4nBLyLegu5NMQXLyP6E/v5DcrW3nrGSNjO9Eqdsdb"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.9d991c8c.0_1596838125639_0.9149311369498203"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.13bfbd72.0","@material/top-app-bar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6xJDn4jvVR8LilpCijGwmbtK1H14tvV4bImid5Hsc/OXTpPIs/HtdKtuuw2biACMEH3D4NXM8DVwJS9IkxYEpQ==","shasum":"12c415126b59b8fce31b4aede0cd0a3f2264a987","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.13bfbd72.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ+tCRA9TVsSAnZWagAAxm0P/j8RdfZaFBaEPrVRJMU2\nh+Xv56Fp88OtvmJVL6R61Ae82p+YNkeFjO4pFcaP6QMXCMmwN32HdLCiUIki\n49eBDyUjcMPc6laPigclGcRUTtf2ZusyLEi7d1v0J9dN3Zr5cXw5I5NO7GcN\nylMj535ic90DbvURs5JTOXuTAD86Kc6aQScoYVdiUgxvNLANesfAGpKBMXgD\nGgEMyK0mwA2JwIUaUS/Xeqg3I+7chTniCbRr8fXf+mQz6m8Phow2lk2rm0n0\nOFz/0bz6tR5WxcdUuFrpsNNze98dbFLzHmxkGOjUGmd76sh+nITXrY1hyq2k\nl+C1NEiBjjDd0B239fkNMuGwMiCXxpobLR9aj6YDq9LRqW2OPJ7BsTJoWpX2\nGhuvywNgl0wTrMlg8MppAx9WsxPGRT/6wkhj3AXsTahDxTI4PZBsxsOQzLcT\neZdo8U6+PetOgvsmLGXsvJDmDOyr6FIqAd7wSoPUSgQJRxVCbqGBMtYh0mPF\nqbaio23LSyRU3nFmhBAEFCBFc+hjUdsDPUq/F5jya/7Tie2MD+OMQalJO+tA\nrVhxWP2F66/vXX8yiCEx6j79xVCd1GKSK4s6FbKrSOSPc376Sn0ClpcCzKba\nWf3kYBEgLS+4RDtlsQmfP+2JL/+T2SS61A9ehIrOuaqlhA9WH7FErO6CEp8C\n/ZPQ\r\n=Bg+M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDaBuczzPX25orPXvUNCdZm0NvIzJr/d7iZ1gjH0FeUqAiARABqdVd5M4ff8QKXJoVm1oDmNfvdsAdbcrPxplzaE+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-fixed_0.19.0-canary.13bfbd72.0_1597087661168_0.1396402612390164"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.30b1b258.0","@material/top-app-bar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-W4trfKjGx84BUVDtJ7T3MvujPBvqgzq6NwL7qHEyD24wb/d/XB3rqQigBQ1Q4gGEUCw230Zg8R8wV1k1MXfTIw==","shasum":"397356cb904a439a7a3a33858ad907d4b912a8b6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.30b1b258.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMaj0CRA9TVsSAnZWagAARWwP/1V3m/QBjHZjf/UOvL1N\nipUAss7H5mwUKQbKQrMH0j6cjb7UaA6qmVmuVqGeddoKhS0Dey/jOcxLdpc0\nxUXAS7Kwbgic25oS4ZdUxRHJAOM2I5oiaTVw6xCai5zSECqNi6xNuUIEQYnQ\nGm2DvAzSqf/T7ekkokyOmtGEpCOXL1bMZT6mDbN0vigc5jBjGc9bhAWVoGSB\nsAEzinz4O3oUSr8EYtzUE/RhgYm+FhecExR5D66v/4QIl3l2LXK3f8wVdEVF\nlsO9Pl6XCEbTJJtt76c55N8GJ50NE8sF9e+67QJ89xt6b79xUwNQ2EwKEsSC\nhp+lWjG2EkUFyhvDV4ikl3CA+i4xg17oetqmcAHExXBdGUcGg/x8somEQirC\nZltPHUktNB8wcoEJQFAAyirrkfgVIX+gOIvsCwdB+Uectftgzpck8G3/M1G0\nczKjAbDCz/SkABCRx8LU1mhwO7QmMPqxuL9gjwIqB4maMjVRWwfCvJQ9GIhs\nQeWXJiDsvSnzDEmS5QcF3k1AXcIOdn01sRp5wZzJ1ftNO9IBTCDOZ+TiafVj\nmgXxKKLY3t8vI5e45m2AkDz2oRo6JMLiz0q5E2tICp7OxDUCO1/KFV456lyU\nfy0Wg3PbIq5KIfP19S907CRWyYj4o74ZfdWqD/zj2ShBcrfzje9W/ekmd8Pu\ndaFz\r\n=oRe7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDtZm0fioF2KT9Lhr9i9e27ZnqIygDT9IpflfzAURYulAiEA2YizC9hMHVldh8b4KZzMbFeaWdOJ+cLq5rOUcFCQzmk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.30b1b258.0_1597090035856_0.17361464325438547"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.1583e263.0","@material/top-app-bar":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-7Mwol12t2BG9XdRN/jr2WG891Lnjvxsrhq6Yg30bbZFdVnYXJb/HnMp890H6tnxjXk6brylZcL0XGfZGwiWV1Q==","shasum":"4388d4a12a476ea93afb78ee2602f0467bb54f03","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.1583e263.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyWGCRA9TVsSAnZWagAAUH0P/2yIBUizbwwUHCagM16A\ny10qhYfTgoGoqwSja/2nrw8D3Ey/7o/3JIJ5RSc/d+iNVYnO7d2Xb4v6IwDw\niD8T4nLzQP/uQ5ykHpFLvR7RRl5fN/upk6eFhRF3nFYWtSOTEGCnFcOlGpeu\nMf7eAQCXVGD1f32dESeicJQkVaFGnG/8F4bAtQOwqF7VxupYXb4AopXx3nQl\nOWHo+8LFvqIaW/U2EmafCDBfqeEYy5Q4++BPnLH+b954v5OVTUbsAl0vS+49\n7g+8Ir7PIKWa00I0iumWzryZ9XgeREibHeVyltUNvHRw28asJuF1mzEkL7Hh\nDsznSbH5ii/YXjNZdR8xONcFRmf050ds0ir7H537e7LFZrwoF0e/jI2bPSt4\nJ9S4qbexnMcQNe+0BrCuDq9cHtkn9qP53nlyoGx0eCwVeBTFkmwEkFc40z05\ny8/XHMN7jVQtlSXL+VcrkA76AORpUgEqO4ipW1P4QGDZexfTWNtaKSsreKSZ\nur7nARqqBst+/ZYbMmT0I43R5QpwsGx9aF+KeYM+Pn4jgipoD6HoYmK505H2\nPqy8AVwVfZRz3wUePn9Rq9B+VUinGhDMcYVpeZI8w15LURgF0KveLfGTbolQ\ncxLr3Xi0ZL8EL5163REhaYXBjjm9fEF8Bl6DvJ1/RsFOm+5qWjL/++xocFCs\nS5vb\r\n=BKV9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACWH3RfuS05ArDdl2XYg71n1N3VlcO1w3KyvZfJ6fUwAiAkh1QJXkcge/SFQdq2zNw39HJX4Qfu3QDVF2fPIAZyXQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.1583e263.0_1597187461657_0.8933460217132867"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.fefb1a93.0","@material/top-app-bar":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Ekp2A+CLZO93a2Ux2At/w8Oz9RojHPuBrCSenOnwODb0iRE77gXw+3BfFq7BYcXBqb5o75463N4qco00K4+RcA==","shasum":"1e24a7e168aab69c98a024e3931ce773aa07ee17","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.fefb1a93.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzb4CRA9TVsSAnZWagAAr8QQAJMtbISg2mWTmtygtEmo\nDg6dYYNBqZq9Yx/DLrujuJwytswRuUj+uh+ofWbJ3adZukp++LBHFkXezCT5\n9wCKjoHI8XHxn5Eegn22FcXG0zzZ4+h2ZEAGB5d879I1F+9XFd0262lT0f9f\nrZXYWTKBr0uybjctivsbs5vJm0nUpu7CKdxU7z9JhsNMlTL4WTykBspmrANu\nhy+SbHd+wxRzDcOUCnisHIK00RxBxPCpDBJFhazNEt8eqY7riFlZcChaHg+1\nm0e7FMeh1fhgQD5hEz5m5eKx4jhTESNIDKl5KkCkWQVsrjuqkTa7io80isci\nMSifmLJpy14LB4xycwbHRgkBy7RFAWB42gKl3B8DbSw6kIYC6d86P6BFTX5Z\npVyKEp1oe/I/YHiRWKg0XMaQrlXYdQpiJHolhBtW1Cv88BmfihoIGinLSqao\nESgEa0IYhq1yOeOcJTIOFmqfa9bXBwSaRSeCND32QoJGtn/Sez6X7PKH2LKS\nPOIsxcZfRMbrSH5/4+MB8G2me2rCT1AexPhND3aeRfql53kP1C+bJ/DEeEaX\nWhUP1EmWoQmOcn//axQZjaJWTblJmKpDy8skzpa++2gPnlPql7hXCSo0KOQ+\nZYpdStETpXgm3PKzw7AZoXsyHUPpiZVoQROfcaHtmHpfABtzmN2ZGGsG0oz2\nWz0u\r\n=efJF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH63xvE3yetoO2IBxJE/1P9e5KNRDdHpy8wJ1LCrMNr5AiAySO24UardP/bchnJHMubecpESomABslD3BkapdgCSgA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.fefb1a93.0_1597191927844_0.25833241825469466"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.1ac5b9d4.0","@material/top-app-bar":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1qJpRslLOT29jgr0FbXlOGfXR2dHAEPa2yn3bT/WFOwIspALXYDenoqedqCjc2vXtI8V6wE3332wHmltpe87Ag==","shasum":"db2f19a80c044cecfdf51f779f118789f549e3a9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDSfCRA9TVsSAnZWagAAfZoP/1+zB8O8TqDPgZn/stGP\n/Aeq2oLpfsdvN3rrlMQXiv65Qf8b+/5GMpOl0Q1oMrc5vDToWmtuVKcYFHgV\n8vfpJDonT3bimX/qeSd5xTfFxmSK45LIvV4AuXAxlxh6liwJ+2+D6+oOf5JX\nj3FspEBVWWYbIm2F394LFP8cDO4ixpCMtRElMAJeIauQZEaFwtgx2bP1luP3\nBBneqWxHV90/cELGRiwKrNBhVa2ifBapGqdiLhIMn7TkZUaP6zJBQO+cE/7p\nz9jh6BN5V6mSids7eH0o+O61Or7FzlP6CKxEGYY7/xS2xguhqpH4CWtLQAZ/\nMmIzDh3td5mA2kCBSXFY4/yW8U1tnWHSSHX3CdPHuZrrf59S0Bx1AXZLhQWU\nkJcq9d8+xrN6ljVzkiRju+5VRjhxczVRK8PBUyLxxos8KvrfzpTFolIJuoap\nbfevdxejv+3NxeyUIt/9io0J2a/kKYpRecUbq/UZD9LKIvrGbKvE4/QTHMFV\nqQ3Rj0PUondbWG+6bRBHd4bR5PS5TUJW2IuM26XA/2f2vjfcC4e7NSqdlu9h\nYxVlcTyKdO6IEdg1JTFVWU4z3VsB3JvHGNHS+2odOgY2PHjDUMVM0/RYxNf/\najqBoG4LNxytOb5LJGCqQvTnwTdbMS/soTNmdsoNRBgGgW1UW+wvhtPurNnY\nIkHy\r\n=L0/K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA6PA9k6tDP7iJUJrVEGdgiTQINnstGDyLfF4oO38gveAiEAkGvRH2Oq3TM0eUTIA7jikzUuowwAWnVFvacdOs2PA4s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.1ac5b9d4.0_1597256863088_0.8100480753716706"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.f17f5052.0","@material/top-app-bar":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-myylC73NCmEVN/neej/GphvcL8itN6ABE0kFFvq7fCoxdC+12yzPnajmgeMEFNUDo0icmjqldhCj5aJms4Oz6g==","shasum":"7288f23d710376aa01bdb45a8e7d95808c95ea7e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.f17f5052.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXUJCRA9TVsSAnZWagAANyoP+wTWb79Yyl/NxE4qV9Ow\n5HKcASZ9ajxCPV2g1mv7V/nCMyAO4bWwtZSvRxrYk9tVb0VDcsZUXoVW9pZQ\nuHWcQh2IubKGJa+knSU8GgiGqAQ24hmFMw4f+t87XIVguA26ti2WNqL3P2wQ\ns2w+AB/LGRQoE1EzT90RoiceUZ3UoRmqDAFgDY6GpXA4qTuHSaD4eTHC5gWD\nhUPcUDStcTt78+Ad3FAN1Uc1VHpsX4omkMV1mqRAkyDrIVt2mfEBIQgLI4Cw\nJmsaQNxx0X/NOc3c0cF0dl87lXhBPRluAAVs/TRUcRLvFGfaMdsE1BaVByjx\nqfplpIymYs8hMa00bGRTc43Zr4wbnZ7wh8qnbjWbR+s9+RAxPCrQJC8PfhIB\n9VG7l6x4olJw+NOwkfEdWzExgcOQOyqDRBI4KOBFX45yuJYvi0uB8PQap4H/\njawAxxD3/qQ3aj1uGOfrKLQ+Ym9JP6gUeSA38x4Xw1NdkHcqeP3Btd3kyyKp\nCUHq5J3iw2OEbzHdKwtuzh0CAxx+mDKULM1oW7L0a6WE2FvBGGnCB5OpYT/p\nP84ooinUIR8uXGaD6wEQ8l2oQcocweFwwF5zPXxm07u2sMBqDyDOaqYg51EE\nq1riCDzem8aUv7fks2xW3h5wGbJav1O/LMNaHmIUmDRoh2IUaSRsQOTRyPOO\ngBgC\r\n=yMzN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDrBfbZAdeXR6AN120xvjJAj5xCf/C6UOyeypoUHeJT1AiBkJqd5TYf9FCXbbdZH8BgwyOCJXZGuqX0F3SEbwqqIOg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.f17f5052.0_1597338889199_0.13502032149452226"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.80b5d20d.0","@material/top-app-bar":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-UXzcIlG31GKaCc4G1PAI6syeH4xip1UUKql7qvdXH2pwXaMNr4MoK0Y4ZB6IjcAr8WzPP1BLoiEjTkLtpRBkfw==","shasum":"02338bfcbfb10a0cd50c59d437a71a9da55ba044","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.80b5d20d.0.tgz","fileCount":11,"unpackedSize":29713,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYO/CRA9TVsSAnZWagAAkMkP/3z/NnM8hZ0uAMTdEYvU\nWUjK/ODI/nApyxumRMupFIVgkvOzSqZ1lmKIm375LD9f8/qkxVJnMkaPCT0D\nyNSTUtjP+P1Xhi22EgQRlr+n+d79mPVmc9JIlgQ1wgA/n1GdKw9ThSTM1g7L\np3DeeNnm9XPBGuKdcnFg1GRKwcYIRtgD9RNbEw4DDfZ41kCtXLp5pspchjDa\nphAD0R4ZuW5/ha0RYOwgx63VPjx+UByjnt1OAf4iiE7A59G+WTlFQ6zD8EgA\nsxoej6nIBCBNq3kNcA+NEsfjR6sM44+5bSIegYmlgVN97PsGtblv3s1FuOCB\nQHuL9GniInSFdzJOunrp+2lWj0gaYnvJyfcI4rbYYocu+LgZynevPud3tSe9\nz9xd9f/Atqn7uGCp6Xiw0wCdWJydedHEaxZoDcQEtOQh3+j/IY8cdDwf8aaU\nyEg5kd4WPp3QTycMl9yi9/l0FEb7y2AUjiizjt1QVP7qYr6YjKmSkwbmohw6\nG4EV4r35h9azl6mleFjYG5lXH/v8VerfWANiXGpuyVUZUK0zqMy8LyjB7GF2\n4YSs1JILjXh88ur5ABS6tQfsPgek11rdxQQojeHDbN88S2259eT+H6WuIt2N\na2xeelbNFF1uK3jT44WR8/MDGKuEAG9/fbcJ7PC9a1jjJLu6tKjNm+dquoS8\nlRVQ\r\n=doUP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDcUXoCbg4srkTZUxj8yLgOjHliJFMuEpjWzQJGTBR3+AiEAipxiREI3LejuiZfRk5RLF+5KWHvei/x9gfBDG7MbW2c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.80b5d20d.0_1597342655523_0.008077035340386507"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.758635ed.0","@material/top-app-bar":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6ExkrEuQEgwtPUuTqMAtFRVDRJgBKSikX5R3xQ5G1Oz9pf35LHQXayJ4ziwdwdiGQmV7JEsNNxp+Bkis2pORTg==","shasum":"ca903af421d54d5478018c6746b8ad7855d1dda4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.758635ed.0.tgz","fileCount":11,"unpackedSize":29701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNscOCRA9TVsSAnZWagAACioP/jCE9gpFTDwt60rF4llf\nwPtpqeunfy5qqYyl4orFFBax95KkEcSXDlg2AOqiC5GjG8l2AjDyTPJYN8dp\nImW51I07IoryvqRZ0xDR0is/WoVK00N4lhRqicySxyMhr6ZiGHUsqBdQh8Zc\nQLzZB0dRnQwXiYBPz4gvoqMx1cSj0AxEGM2PnQOebe74CssjNXoWFtO1odHr\nPnOgN3wfZjYXIup1ZEnGkjIAv9NOkWFxn5S/qJKfXpvJF/er9/JGwYg2FKB0\nUY8O72Oa7G/tKQsICsLMd2naXSyb6QVfrbya95xBuvfLOtBRev4OfS5g6fpu\nQOra5XruU2lxaPtievvDyoR85558+7E6pi6lCkREo65AOrFCt5nBVao8i6Lq\nDQK9Kou/LECBpipE0c4ECaHV8E8zodiuCXl4TR5dK0SOrlVI0kY7kuOk1IUR\nYQMjPNsDNY9+p4zEBGUwKFlb+rn6dR24QnEXKj70Fxe2zOo5xbd+HzNVHF/n\n5zXAgt4xcXHJ0EdS+dKoT45FIWrz4fB7WvswjcfDtFatgVCLyiO5UrQ48QYe\nT2Kk42qAdCtYNZ3QY/SyIdqeeb3ujWq+LrljKKTOa2vx7+d8uuEVC8MHn1EJ\n3SZHX+KX4WXKj2jtAF2C4XmV3WSoAvQ4r/8fGqqCHuSveVhl13q9nO340r5G\nAlXB\r\n=IXot\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkohPOKsea55X+v2TY/yUsds9QrdJSS4uureXvOoo3BwIhAJAriBgiq7AY0kPOv20VCmznb6X7Dn+97YJnoKtIPSR3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.758635ed.0_1597425422038_0.03441366209075403"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.18d6b808.0","@material/top-app-bar":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-mNr41OyJANq4pEyf1e5FfWkjyN7WFXwvKkFPFrFt1PZucP4lqRPF+RCQT+rMSMSZq6QSBCkV2vaZ5atg3tCbbw==","shasum":"694cb37cb3c88ca2a1fb036aca61c08134536083","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.18d6b808.0.tgz","fileCount":11,"unpackedSize":29701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxllCRA9TVsSAnZWagAAE1UP/it/Ax09bmCT1b+nxZys\nM/IuHZYJg45tHDzrWOO0PCN5A7yg1CeIY/b2/JnMEZA/OO+yl/Bn+1DTKfQD\n4WmEQJal/WYRP8II0l+abUn/IwnlBynJ/E5Tw5TxOAmtV3A1ERCOMmuFZ+Xh\nYEEvX9PgVBIp6Eq82hXKkVBO2h75mBZiPDKFfGuTc4o+MrcP4Lhf3YozkbtH\nDEhQQUq9E7dzK2QhQIGGh2vxqUBKV7okxXgT9QM6/+5fhyfyiMnZh5HhkEPU\nKN1ul6M+hjMo2EHjMKBMMaji++dRFNqxLQOk3vb2GDdnrBBgXzQ6cs5FRkyW\nYtT6qrOtD56YEdrtBrx0yBolUw9UDCP1tR14Fb2dlGVL9u0dV4O8yF+/PXpz\nLTwnHkQmS1uQEnU2rkzqVwgIfnHlmmID2VCuzmqUrMxAsvmIk6/O4xqGRBpA\nYcBGTkcsx+ZRv4OnBmxON+Axnb/yVlbpta5ax624CXkqB9WcmGixL7Apidkv\nSyth5zEBrvJFJV/sAH6+lfDP7YO+saX1lhX2jL7giMLhBIkfjVW5dzK6wJQz\ncjqmaKNd5dImRejj3y4Qls41mrk0SxllmNJ9IJT9GjS9EB2NMrbymmPncTD8\nKowQ/P1jAimvyzHy+cCJX5sJ79zHvIJTgouTZiK+Eq01QiVLBpnfXU6RSTP3\nos3U\r\n=duud\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDStqNdagRWmy2adqu503WmJZT4DANN6zjiawOMvB4DYAiEA9ZjiPhjPgyYoVPCeA5isVk+ZndNpVx0jnFfJTMUR5iA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.18d6b808.0_1597446500876_0.5849597765425663"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.5f8ffbd1.0","@material/top-app-bar":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tmKAdyN/IqDry1x1jVbGQetWkh8JT0qdupCo5peAXkfNpt71QV4sA5B74O+DVCvmfELnM/Rl8UVBt6L88CkUuQ==","shasum":"41e464a2449b866f8d9fd118e0a8021d0bc1c8a2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":11,"unpackedSize":29701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwGaCRA9TVsSAnZWagAAIwMP/RTfTJ3juEd8cmqlJx8s\nNUcZP3iFIZV6m8+S4fkWR6OL6dV5SU25X1YRpGTgb9VqXedrUWKoRmpfTplX\nxsGh7eRwlWO5BYhi2GPIE77PS1QjWyh0CIf3/GROUEO+uAuS4JqL1kqqet/+\nzAcCF5jq3bSvemEsEq+Zkn2gGNNO09R//1HgigMFtuHu8tEc6Yb3U2wnyWDc\nHQbMyD0owShtTyl9Zornupu02THxtmjPAi/0i64DRTm1oCz7XYQKheD51yVk\n/L84IV0q0s8PgLLXBOE/QeoL0bTtwneINalHCXaV5iQHb6ZlIm90HPRMwRp3\n+xZPFwNbTUZj0TOJ1FTDl1ak17se7GBkt80vUwzHyM0AoBLF9N48FHRaSjID\nqtz7zzejEaqQvmQsiG2/oWRmO/oQ10ySW/Jkqh2lYc10yzZ/2gjAt24u3TUW\n8x8JMYAhcnPFxnaiV09OfvuedloApWzQoq+yv/2/+Uu/aapj5xdE4zRXQv+i\nGKeBTjpIwEQ+fSdwP3bK5N1+ohpVbcgTzyRl5bv7k2spY96TffP13ckqyqbA\nkyAwskQWn4b3LO9qW2xTBut0MhrFC4ErGwCaUjKDiydpILkE6uxP4+x282dD\nf4yP5IIB4wUTrHqflcQ3fgAk/VWke7rBelHGL39khS7Ek2TN6VmMIwnbhScd\nx3BG\r\n=6gey\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUCJbuz8yE9Fv8D6QkXV2uUqlQr0n6GtzKb3mFyxc4OAIgfbUF5M6JqzdDD/WXOGsnr+Yn1XhOv4AKaxvQyJZDZ1c="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.5f8ffbd1.0_1597702553808_0.9244753537561605"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.8604d59e.0","@material/top-app-bar":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1Vlcm1CZIkg5BrraFhHVphO6a802bFROmqc6S5wfDtg/1APZDNtaNa8Z002CjFAvt3yyJJ07EYOVeED0c9dxjg==","shasum":"9a552af91f384e9f291dc84aa3aba9988780c23e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.8604d59e.0.tgz","fileCount":11,"unpackedSize":29693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyjACRA9TVsSAnZWagAAkO0P/R8o0KvljX11AfCMAuSc\nYuMl9oz0bmrvjLoazvYTNCTtPbVZ6mhUoHlNoxQnbFXpX/YInAONMDgVc7+v\np7MhmnBq2gbWR96zHp1nDaoe89Ph8qyihFQPYOblZoKrUOcFHiOABGuLT3y/\ny6PcDLri6vzVRVyDKggeDuB020Jl3Wzq/cefPUWism9tDoM7rsu+7lZZMcr2\nWTr+KfdlsKdzw4huOdS7f2ezi1cV4GPcBp2Dn/pMPT56CMiOhAYMY64NwaA+\n6m0iF6bAHfGxidLUEXmE1Yb1xPV3qTNrKqBpOzWjNpY8r2dlmUdwKWgFoDLi\nU75LEkwjsJVtjwkCgQzrHvloRrrU18oKjRQYXMATuxPkVFWfQz8GbpFZngIz\n1eVLnxyaHZ+BA2GnNjE8EKLHxmtzoymk6rFUMXUSfBm8sqzijdCAeh7jKpwb\nVCDDLJYT5poDKJFcfJ7ZksShPWttIzdhNDPhlwnyYQyIsWzZZX83l5sEMm5+\n68LELDrYsDobL98lDLtiMtUAjg6ifZa8LSQO5GTVEOOdCaiAzv4cwLOFHmeH\nwpjLC3yxkTO5NIFUQhjHrBumhrkPopXG654wJ9mrmYWDg7y49DDQZD5Vc9Do\nO7WcsOd9GhDbw6rJp8Np4hI53qMsTsVh0PJ+abEGQrPPZuom/Lrh0JdpHC4b\n7JBH\r\n=C0wd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXJS6fjx1B0a4sPEmDkrc7F30tfHChsjgivIA3LNyw7QIhAIyC3+ZwnR3j6FeKG8tk61do89cM+AkxqsN+amvGXc9D"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.8604d59e.0_1597712576463_0.8076989166656374"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.1d7d5e34.0","@material/top-app-bar":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6zbPYpo/x1MHsMKxZRPsyP0O0RBCDgAoeatijQK2mdR/Z1SY4lqGxMgYPRiUp6M0DmmvmGOE7UAXleSnFUhyXw==","shasum":"c2aa5bf941a67ff96f22592eb2c5f958a002db2c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.1d7d5e34.0.tgz","fileCount":11,"unpackedSize":29693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyo/CRA9TVsSAnZWagAA0OoP/1gv1/8pCvz/G/Q+srPw\nou6PrBIILicHeyXWOmUx0DW4ZHMXLNTgHa9+2Z63D1vaO0LNRblERc0/qN2w\nF2XX+LKkENjGcAlQemerN/5N4tI18QvlPmpfgSUJdHz/nw5nm52t6B2kmPN4\nsUjpuEqdFdYC8NPxMKp0q1mqUBuVyL9eX0rTaWxJqJOu/LxYnB0XRoxg7tRc\nCBbEDA+GRpUDUzbTBJu6Ip/pQ/5GDt/RYmVGYFF5yYB849P6VURzx4KQvTwU\n9+hgHK4Dsa1CB/yMabtyUKkrGoqSApDE0GIK8XW7nSTJqfynQF4rJ+/u/fJf\nBfG/bA8RAfbbhAVR8Le+bb/+TOhzQ0szMsr0+ubDM0Wau/kqrJKLXOumQvPL\nOKZifFqBAuj5WRB7J2pNVMdvJsbT2m4DxqezAPAU/0hdWvnmvS2HU0+0Lr7a\nDb25uA5tzOKGnmVKe8QPlYN/0UgUQC+ovdCPecXATxRA8D7F2LcH0e1UhXM7\nmEsWoKRPrWWDWtfrO0O2bh2xgSc2eNNbJxR9aMUF97WNfZ45gd+9kuyubZkS\nZ2TulH7h2a0/xmGz4kWPo9i7a87mlxOq7fQgxjxjtNDsbo0bNy22D5MgQWaN\n2qH+rHoauhrq2dlKGkmJoSPvqdryE8HnR2QOmJw3GAr6mrNFc5cqFyk9cEyZ\nQIxI\r\n=sFlP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHZQpNM4WqA2LOzs/xRrm+e2zzhtW9w0xSNAK+4Qp0tjAiAp550/txjtmXhejoHX13VBeWGtQsma8yce3Xx28d8mlw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.1d7d5e34.0_1597712958870_0.07762307133146273"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.9cc95c07.0","@material/top-app-bar":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-dIOVWim8AHmfj7u0FTI3YgNgQWot2ipSZobid79+8VtvyD1Y5G3htB/iVTnJKASz/J1rinPBXZWEHYD4pSSvcQ==","shasum":"02695028f87393f6f31006a7f2f3a5bae5cb652f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.9cc95c07.0.tgz","fileCount":11,"unpackedSize":29693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOywICRA9TVsSAnZWagAAOW0P/3+r60qs0I0pSSqentUS\nv4Ldpcw5pN+ymfEWKqWOOzxyw0LmReV6nwavjL3K+KeX7g3yqcrqgxHRMFMH\nXzCULla/YraxPXruUXfj5ef6vNctci2c7wzl9ghIPe069yGNG4kU00a4x82I\nMNaDcZxz+6aB/rgaE7aSaNwtvKQEZIR8OGwT9tCS9a2pmJYSg8BWq41mgBZT\nNORAJF6CpNyp54nK8e0HlOciuPtPL3JYS8afCcUuNcI8uGaNX9na+FKLdsWq\nT7gUIMiSZdU2CSY7P9pFNSZ0ljMbacCm7q0e1fehTsllc0YZ79lzYHHOlVgt\nNa7zB+q6hwI7PJcOgfQsCx/Yk6+HU1hkIjjSOKqoqBMno8GaDrKsDTzNKBhG\nbt2grM3B6zHp+Wv5fMiEmhQUfi735qkTY6USarK3WEIRuBkXL3PafeaG0QZO\ncxiCqvRvx87OL/vrCyTDEu4/KZaf04EMwYTGMIHW5n1Gk42Lkn6k1q8GjYrz\n6y3KksQp+Y6ATZs1J9+p8OCaRKqu0pQlz34TIwd01BM0jirP4D3LrV+8IBiJ\nItfsU7tPd0Dz9VrD+33XXI28J96Iz47QIakAgxmy0tMGlpZacG6Z0qtw2fXT\nF9Tjvfqfw5heFGpdmgCBJv9l8ijZ21iqdFK/0tzZXeudVfWko+JjZpvMUuo/\nnEdB\r\n=71y8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmIGEsR6iD2Y9tZbRPaj1GUiwV+yren5vdiZj2YfRCVgIgfD+Cv8uPZxVA1doZ8EokDt/tqntncGOr6wP3GQHJ34A="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.9cc95c07.0_1597713416445_0.9940761199853305"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.9f65ced3.0","@material/top-app-bar":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fw1ecsmuxPUI7cDFwc7l36O5Iirw7H6v4NCN2vvAvZvwuTq/OxY8/PsldzmdbfQgHQMfDVC37A4kNqZFsuqSlQ==","shasum":"b2d0b6c0f909a65c03cd954e14a59765a15d592e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.9f65ced3.0.tgz","fileCount":11,"unpackedSize":29693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDcbCRA9TVsSAnZWagAARaoP/1NtcJsyUaeIdD+opntA\nVU2crN6AdpmG5VqZjqehmEdqB4208Zwh2r7wNPY37lqx9VpC/dwAS0koDnu3\nAAyH+8VCTSBpWzjwE2JRpkzvb22/3t9cGd+qQgAQZspz+DBJnLCBd6zieK5C\nJrG6ZbSmJBVeiYbfdIzAE+3RJYp/gJICkJsfPC1ZCGwgcf4aCv3OXlHFWkFp\nRZsMHFxf6Mm+7zsqk39tBiqxyI3+Ls0l6/Lh1Uk/7N5hIxzPHX5svBPsiv1c\nedwhmWebIr/w32N5qj359HnYoT3Vc30H9ZS6OAz/VqLIWzZAWFdYdtPf1n7w\niiqToLlhltJsDO9vHQf3M1YeEE6mf5zQD8/7zuH6fsIrEJvtWOmnqOOu2a5t\n2uSYlg2PgWjbDZhKGZWHSZaJWnz2b6liuGJDrSO2ycGSZvpYSykbUyCk+YJF\njpqemH+/sUCVUEO9RV9nqVR674Y0vSIETcEVfkwQEMdFTcQeJ2stn3T8hqcN\nd3bv5vGQFCBXwKVvmv2VdlcGSxLyWGshdNzfGETAeeU3iy5+7ouW31VNKbHQ\n6eviwEg0H2icDRh+zgw4bcXYR047EIHgUmAai5r3ptxP2G7Rgl1ZkjQLrrsT\ncnFAXtIgmYpxMJrGAYJbD4h+cgj/7zgmItjHW0MDUDrqEg8HeNfQlzf83X88\nVgSd\r\n=v+z4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzD0LlLNVKGJxQ8R9QzujHeiT9bKrFeogO1h6HheZZ0gIhAOlwyIz+w3lHAVat2fQGGSS/FlztYeHRuc1T7A/f3UTt"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.9f65ced3.0_1597781787070_0.5299788868090458"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.5962b365.0","@material/top-app-bar":"=8.0.0-canary.66b8ed7e6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-POR285VXmmJLoPTXdCLXTg9Qzjz3kdn7eOcHuzeBddZZAIbMy7nXW3JmT+fsra52ktET80pON7n3eRjiAQ3aLQ==","shasum":"093931da14b35c825c9ade5bc94362548bc4ec65","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.5962b365.0.tgz","fileCount":11,"unpackedSize":29693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYukCRA9TVsSAnZWagAAPaMQAJSowAuU8fnHZrQ26rfw\n9wXG6ooZbzOomjMVSxkrb8Pu3sXOkIN+A4GCDhJl+tqKeJUQrYr5GYaPCzL+\n+Nt9km1ll9lHhNfPOmumZHzFhTMAKVYPTDCLpfy5CfTQirM+k2nEsmopJAry\n/jugYC/UMvx+9bcq1FUAvXFbQSuiNEQF8wjZKbcqSqCrRZUYSx0MO3aM6Bfa\n6W0+/qelP45r/JTfcf+yhX8RzrL6x9Fv8ErLAMVY2vTG/8kzXdya+/yIj/Er\nnXzYNgz/AfB8IQuj11qvEZyYpGOcCWQAu8tmdgTEYI7hBR/crRijbaJWcsDI\neLN6bZOftVwyXrgS8KAiMTjO7et0fNKl9m33Iihu/NJoD4qD1JmKjeomGFuC\ng8rHyU8UIvTbtH21a8sRBOQwIHHGFxbKUXLQlFvzo8sbVXa/eEgvUK4i9sR1\ndxpeR46Xmxtuj4LbOZgIZaetujpkVwHOuvHSPCDre1n8YN3iQ5DEHQYeCK/w\n5+66+qw9LDVIdV+8PkOh44zhL2+gf0ROFtZmUU7mjXrD9wBpmg5T7/8t8otl\npoVFN7daALEURg2fcXKk2uY+y0gFojNpvS96o/DUuxwPdGgulTFi5GKhUdcf\n+qDCyicTpzb3PEu8W4Bl35bgL6Cy3mLecBgC0xctOenjQw8sq21jVuNJvfyE\ntZKg\r\n=bkgq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFlvNm9ZQQyvqrkEFLWUWm7BWP951mHjv5YUxSk0Sp3VAiEAzV40mpQ2cuOhJXBAYuyZCW/VeElMc7LeBSsoljnfE9E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.5962b365.0_1597868963906_0.40905550404983004"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.9c9ec756.0","@material/top-app-bar":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0IQKsUpI6KKJ12O0ZLQoXS5T0PvxRJO0d14GSGZOf3aqbHU9fVcxVIyC8s6QOPhP5GJ2KIHCXDIhjeCZ0SVf1Q==","shasum":"3af2a719f2b998a35c13add2f1d5e156fa39e7f5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.9c9ec756.0.tgz","fileCount":11,"unpackedSize":29693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsdKCRA9TVsSAnZWagAAjCcQAKK3KCkjzFEsiGMnHXGV\nbk2YBBywIm2S3BbFxQ4grPndyu990J+fsK0GQycdsmAmwNXzlEw1AFZ/VfM0\ncs35KUItZQnJdKZeXaSuhV25roI8ZkjjhouXNGXqxQvEUlKCxRi/ckaHhWkL\n5/909FUr6TFSrXu83CWDqa6B/k1ABSb1Ev/73w7xMCl7zl+onZleqVnA7ryd\nXLNONJh8M0yECciSYckVBFHM4BGTwUlJ/CyMoNrhnCz8OKP24CACpvUUUnPi\nkom2ZniXV5Tj52vql+rFdM8uZu8UXjwIIw9xQRK9kMHkMHURvtLriCIlL1ox\nua2Py2idyyS2cj/i4g8uKqeZTcxZgIVBxgX0xVkLkpYclvkcSwkfu9uHBmbs\n/gShs8CiYCv3Rkm2mxEz6DaaCvzdSxwb0RbB3mr5UqfxTn1Cmc5QQheyLHo4\nX9SqrkMc6kizh93BUicefq2FEXcmaFCqzi4Rz7rGmHJ1l8inHJN4yan4NvQ8\n60dvf9xIldh//0hgCO4Mzc7W6PH0XmUkFabdSio+amc3RIyWf7J52GS7krBA\nkN6z2XfNcIFKminBt0PYbEvf1AOt2Rz+2sKqps93wkx0qFOjR320CPNpfet7\njbNObdzpG15J6DS85RqnQB2lgwH6R1ou7mGdAMmXs1kjNioILCWcjcFlOio7\nuwJh\r\n=1GPa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDABHigkSlmV6X14SJRk4vbN/z8sVDWI+GI7WmZuI7ycQIgEyZjvWGF2qcJ2+CgMrH7Lrh4ZOi1F5OOD+yiwRwkkS4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.9c9ec756.0_1597949770299_0.7478071064793972"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.fa0ad66a.0","@material/top-app-bar":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3BQ5vaNieylqTSVu5+ViFMqqgHriOX6eh5s7qq0I+dc9aN/NBMDdyHwMMeBloijdusI1Sglv55fqKCX/hRfbwA==","shasum":"cfe4f57f09e1cdc01a5603489f5440b3a29173f2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.fa0ad66a.0.tgz","fileCount":11,"unpackedSize":29693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt6GCRA9TVsSAnZWagAApK8P/A0mb0mas6jqBQs0KHoE\n12Js1lXDrV1IDihYaJ5r00LbJa408XYOsQroCANsqCcjWSS76RmfHfRdz2jz\nJ6gwMx0GnAMDlr+rTao0NuhBJwiJvDidOrnly6dPNO6+FgDA9Q5NG9dbb/9L\n//tw3RPhUTyr8OkI9Q/bmRBLvpkZ152d1kY2CHUFmGUqecB2H1Kvjeuierfl\n48svelPFnSIDeP1qNXfITyHclNG24Vlz2a8uxIExC4hqfZaWHpwrupg2DdJT\nFozsGIBXGctom+pB4X9hjrQyH3wRavOlqldIqzSNxqevmXecBtzE5hNNuInT\n/NtaFn4dAwStp+/gJUxueiAafYjbimwkZgUFVmydSerMQIDNS6Fo0+1VbuPj\ngWzAcngdyePZeErD4t6Mz9+lBFm6YH3rZ1WdFDKTK0z6aU2Ttrb0JDwTf9gA\n3nA1hLuBXp5GCD7Y3m/e/39g97iXJbuJQdHxD+Y1yil2nOLpjb7bSnwwnDXv\nS3GsLyyddaCMJaEZor1dKfNi7mYcCB3ja3zZcloSL6CTopp5nyjH2lA/KTQE\nhu89HKG9caegQfk786zkd8lFwS1SpacbhQ7GwL1cYNWj/7dsr3y33b6F05YM\nq/VqXirDAIRMPAUKfrh+BKgFYWPPwNlfJqnc9S0okIJulgA8uCU0QgKyPqbG\nkgbC\r\n=YJP1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAvH7cniz9ooLi9wF00OmNieWQX5D3wWRruIf5KPRb3GAiB+mCXaJLB76aQnX2VIrp5poVS2WaB3UPf3NzJ+NNoaGw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.fa0ad66a.0_1597955718395_0.663051644670168"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.06ecdd6b.0","@material/top-app-bar":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-I/MTv5WACPRzK3pD1iDkACjhUUbKHVN2yD44qjoWPJyygJGGDw7BnWZfaIg5FEqkDUVti5CNKSi9LNvZBqTyZg==","shasum":"3859c7872c6474e278689b1619fc23020982e0ca","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.06ecdd6b.0.tgz","fileCount":11,"unpackedSize":29693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuxXCRA9TVsSAnZWagAAyLAP/1vEo+q89XCuPRMJoG4u\nkUjIgueUk3+Q80PfTmM/IQ17UxIo/oANqJnxv5hKbD61NtJFMcsmHbD6gw0E\ndNqHiA8CXB66n4cUcGF5t/tnYXeDBF6BisxN8cTRsc1fMVrhX/SLt4aWqQFH\nQoneWEpHN+NEW/2PtW7ycv6kT/K2j58zzJbonSfiv028+rjC6mwZx088vn/k\ncsq4GjmmNQ954N+z/GABmXeFeAV/bMaBaqlC9gFSN4eiHUfeRo0Nze/MiXhk\naQAwn4OrQOV0G4aFt40t63GdbktHFQeRewlQakEcfwR6B4DpTRSB+jXNljmb\n3+hbW7n+wffiTonorBAmFiyJUZh5VjnEXHkO3fNMPqOgnH+Z9LrsvXTujB4R\nXgjJsHdryZCImes/gMSzKTXbbjbhT5x/cMSyr5CO80Ut55KLiPSFWu8TR74K\npkepdHgcAyex4fLeMSDbmvgggzDAfGyFRRbinhevxfuvGF4ledpV0X963c1X\nDhHN71LCFf4ECNDDan2LLJlszRNNvYLxOT6Fvr9RegfMbKnXfMt7JHpczEgN\nFnE4UpkV0KjTydqEA3dMD7EosUKrlRYS9SNytTDY8wEekWzKesmZKNMSaXbK\n8Ix9PMbrh+5vO4yJauVNFjatQ51aPjFDXwiI/tseSWQ9zt7oBO9mRC/+lCd3\njSNS\r\n=zM0r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHhwt8C5TS2fbf8oTYwzQtJut6NkRbLosuOZyWYiCZhAIhAPBCVmFtNfGRsF61o9pEB6HVtOpPf4vDVYyKU/iOUmvN"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.06ecdd6b.0_1597959255100_0.45742697333074944"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.2bca2318.0","@material/top-app-bar":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IyT2GbIPVTf8/PAcQgjLozxs+MwSLBbTVu6gfJGnm/9aAZeKPnCX/iQPvDRxSfj+THbjjxI1M2DMoMiUXhVX9Q==","shasum":"9ded2716ca1ac08c7f721bf8c9b6a7b167b56970","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.2bca2318.0.tgz","fileCount":11,"unpackedSize":29693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAntCRA9TVsSAnZWagAAXkkP/2r8ys7pqPfUxWZFAFOt\nXe20VoKcraFjFDejDfpLRxAGN58Is7uZ/WtKGzhTg5VRvUx/Xs1nDLb0Y1O2\nBPmSBhKFCTR5NSNnsMceUAJWXFUDgGV6x/5xwxZjYfMrTj3AViQyQx8DAqxd\nGltcHMq2zvngA9iCUe0ubIxkr678rr1yYUCcrWVycUPshIf0KU8DhPc6HhZn\nbL0ARG14LYRo7LV/el7HN9RZ74ANGZ8zzIsRKd3N55UqpI4gIrjlh0EBymIP\nDtiCEIpZu2ex5jE47rfaGZjAi0UV28YFvdgDfiCLoJ0JfEK5gNTCJb2PSwXh\nTTBkZlM1ILbOfefGUnpyhdbykGqu4J5GMGCzVKxl8aB1P6uDmrlC8SC9eMdX\nAw72BoTDdkRSqfB8JuE1Rp668Gc79eHmaHElF2NzV0irPxVxN0Jq1HGL7cf5\nS+fcGRXejRiyq/hM9VcMgS7dERiTxcI915QDQsb3d8ALxvA39T8tyi1cRF8I\nMHatfw4RmakryHmApH86K6EBrvrnUJbJ88Rzmdme307mGNZShGRA/WRtjMwt\nzudGafbin4jfWteNC94e+uIcq/Kfhsj2VXLQusKcP2XoExgKTOr1AKMsof+g\nylNVLI1X6sm3qL4ZEuYX8WCLlhWeoGaXYulhKJRnSiATYc6VkBkx2lD46EZh\nrxKg\r\n=SQgR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/dZWO7LAxXPunaQ3Ek+EQqhq/RTJbRmc8kkayy0JkCAiEAskrLmRL6UAj79fDsiX/WspfpeuFsPJQv+8UBSx5UOGI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.2bca2318.0_1598032365188_0.22806496914157282"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.6aa47265.0","@material/top-app-bar":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Dxq1E3fkdmW6QUTznJgX0V+iqabw6W8e33Gqzs8I5MJ/LWgZF5qmDjiDODPalM3jCg1ml/rrt/LsvQVtT2X/0A==","shasum":"31d719a82dbb4820f2b281311b1bd8fa80dc912a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.6aa47265.0.tgz","fileCount":11,"unpackedSize":29693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA9/CRA9TVsSAnZWagAAgk4P/iyDr1Cwz0Nl/f5AUb7A\nhoZhgwYydwXg1uL4zG+HO58fpbmEYMCUqkeSi/S9cWyPitZT19IhxgQ702jP\n4NML8QhcVuw1UblEhtQguVIHDVKblXIRqLtjOOYcFpyJTbA4b4TRy3R3tn+n\nD+bz4+GCgJteDtjhUHXfrp6+MmpDRZrnm6PlOS+akZ4mrDMpOTnGaJnz0QOF\nWD3SIqV37++dQUD9ywWK2y3cIcpxEdWFqc8TV2k0lh0auSeqCU4y9BaghQps\n0ieLRgjkSDHYszrHl0bYpm+HF00wApQvFtSPUPCRwcxY9JG9efj/ETS9STKf\nKQJKAhOL0f614C1lLvnZpmvjDjWUx2b44QFo5yqjHidnNBoMB4VaphtJ8B7W\n539xF7fuS4uR2uA53qL8o2PtKpXs6qa1Eb/QnG3vbC7M/xtGx22YdJsGJwV7\nnXioGchXQcG7B789m26ZLHki4VAuSJxdJeMijppXmqtYbRkIgRg/ud3IS0Ht\n+7lTU2YwptEZf4uWalgt4mwZHRhB2k9JMoH9QwM4460m4MMa48RHSCTFE5Lk\nw00f0zEH0uxpWq4MIt7qoJhCTeOWyTXE/SZALorTIqpGKVhnTtfrt+npidQE\nHstf4N30qZc3OEloSP+hVMtMXHBbZ2qxobiv6z7F0K1PVBCXoJdUKfwP1rrx\nh1Qm\r\n=IilL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6LnSl/tFKrHVxLGth2nCtA+cYlhkBqsjFKRoLpDh3eQIgFDSV9CyCrAeMryKV2kogEuDnuIKsp14ddyQgX5ClYTs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.6aa47265.0_1598033791538_0.33117263762383353"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.e7202a07.0","@material/top-app-bar":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-44mGBwTQCgbUKtDDvndSvCBK4cmbbD6an7Ss+xqb4MD6gHJxqIS5IXV3WDHCx0L5DdYpk6xXbZf0g8bxrX4pag==","shasum":"4c7d260baf44a62c18552cd284270fe49935d05f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.e7202a07.0.tgz","fileCount":11,"unpackedSize":29693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB9KCRA9TVsSAnZWagAAcTcQAIvGkw+6v2ilHpYHioM0\naX9VMHv0+zgVnVJtlL4Sy/1sy01zEZM/QG1jW5N2FZXAbeaO4UNg1qxWs6LM\nASEjGlawvK6X85Ftk89LNhqpXqiL0hKY6+/+UvEBXngv0e1GsOHk4F0XIqd8\nQ3OqPhdPTn42C3H4fPZr3qW4GO7My+/LdV0D/jIslkskw8ZWE9Tl/BN9tR2F\nuoH5ZCx/z4SUGaE0vEnNiqWrY+E9KGIpse0cF1z8kgI8SO+nz7hd2ka64/Fx\nMkWrvTMy0X+jaJmtWdbQkbeK5vYnpt1ehJ0mN4IViYciGPwKNmL2KlBuOM9q\nQQBjoibnpysOOgKubtgWotjbE0anSnAMbuLxRG0yyh89EEIHnomtD/SwGGw7\nY9GGl38hz/pYtBnBBMy8Q0fhypnIZPgDHT5Cp4+s6xWKGg6KLXX/HB4/BkvT\npmARa6KeTWqpnnZm0wPwdK6G1dV5erq8s90/+PVK41TL33MBhAhFfG+kurkZ\nUuiG4yLZALi9r0ZkZE4OYuLbdpzInCmS34mddEJnEty0eaQDXeMApKiXtFqr\neET5uDesjnMs2g8UAnyRDOimHzJdEjI4JW0v86Pl0sO/D1dwl+0Ek/r9bZ2T\nf+63ELyBaaCafvJdgm5wddSlf/7oYl7WlFskFDxd0STdNcuYr8Evt7NFEjh4\nZ1EI\r\n=DtCm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBwvA+h3BiiQ+IN7ITC2m3eEixlYXxMAjQFQE5CLP4H3AiAxVKHuPhyzcgUJVefcLLV0FwiTl0+ZWriwrp4YuB5Ihg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.e7202a07.0_1598037833979_0.6211861181791145"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.f208201e.0","@material/top-app-bar":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Ue2t3cnoC9X4mcNMkoUURSPHf0jR2Us0jHQ3/vPwH+ZwqJxdArMBQWQ4sYkwfe/FGoCTOVgV+K97BsLX3tG73g==","shasum":"54b8fbc1692728494a08236a9348154b46c549c4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.f208201e.0.tgz","fileCount":11,"unpackedSize":29693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA8CCRA9TVsSAnZWagAAtnwP/A5D/lZ91MDsMXX9X823\nGdwsswWsZieoEoSoQdZcsoXxs1FAwieWYPez3VhDcxAf3DPsRiEn5/CXbf2R\ny9sxT0Z3fA0RLnuVntfM1cZAsABUYH6Gmig6e9lVAO1UQ+nrsP3TL23QicR4\ndfZPzBGy3Fph6IvTKrV4VUV0Y+eKWuiM7aisNfPmuejq2q8142DUAjh5RKsV\nsJsTyNOc3CyDYA+aMBaE3oqKxEastop8N20m4gFfVaGl0eZ3FocmYSlR0njk\nHSCWrUz2cFe0oXO7q5mUb1gW/bGEU5dnRIgK8Pzj3Xf5bUFodn0sFnmEcLQL\n8B4K0WOKW6DZQwTFLOZIGcBjGFKwa9NJzNg/Si8UlJv5uIql/6xwgpWTHWbM\no5YGzdCatdgg7oW2i7jU6EMxGFeiF31u5Fpab6GK+xjz7LS2nF7sF7+mjzbR\ncdy7QPKtiKKe5P3bXx/IhsUbSJMIe0K/YwfP4G0iqDpFsmrmhz78qqBqk63j\nMXl0RrmEPR9O8Vs5VVFJKlLPsqGBkVJI3/ArkRnLFW60WlByqhmjwHI8EAUc\n04JWl3ciO5a+MqCr3pfLqD1WcEDJT6u3ewJ920tHGXy5Lp5yvsmPHvV9V2jl\nohWJvCEdMGWQsj+g4Z2ttijJGLLVbRFfrwxPw0PeV8Cngh8WnmFrLXQxCtxN\n1ip/\r\n=o9Em\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICReMX6Y6B09XcX8rcKkAco0au/3KrRLbhvylu8gXpGiAiEArdk4IWe+bPnkQXKqxaDOnkJjds5yWemndFeJhYClO8M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.f208201e.0_1598295810482_0.00025817894972912647"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.14a172db.0","@material/top-app-bar":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-t+giBKdrW5n7mvJJfgmJuOW3JBfgFVv9tRseE84YvPgWOuUujlQJub9KJo+DvzHJLoEJ3I/LNjHhmCocaKTNbQ==","shasum":"81a75b3ed5e139d5c88fa65bddc398d05c0a1d3f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.14a172db.0.tgz","fileCount":11,"unpackedSize":29693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWr9CRA9TVsSAnZWagAAJKIP/ilOGqnVq3Tnq0FI/7W7\n8U6onu9myDctRNkQsSMx8UZnb8R9iMFA6gLT5MS1Rb2syhgt1lcloyZD7hiE\nsB0OsRlz4U+YBd1PGA96ZpyNJsLO1uvJsIrtrbRaP5pDlNzRFw0lecDq8pwB\nN0BbJ6CJgRmD3opF2SsGIkH0KiIs5qYmm8Do8pqBOe3MdJpcXhWJJi3WqVfX\ne7iUy7/9HKNid/0bzx+JR8VuVlEXvt9jlsTuWdZGH3cHPYXS/HDmxCa/MUEj\nI5zFbJJ8XLBxQF0kzoXd+6wm/qc1GhYJTRPkxN57cYAMFfIb7FxBrxncllYP\nUvRyM/J+oUMf4Z5PhXYT+YKqBj+cCe5VMhwPB0M0bOf3WQqS5HhaAkM18EKs\nfZOdDFPNmhGJljMLDfTC9H5JJ4fMuLuPoE3pTZQFiISrlm0V+jotCvo41mRw\nFrPXmWGQqxZLpvViL/W+AU5hRINMYJmZPx+go/GzEf1CkcHdg+73QVCDrBV0\nnQpQ/PEujn+2Jbd6V0vRQiGGVmnFewn04kGMzMVOsOV+CT6AEqtzkNRQC88H\nVKIAhGEqOW3LFZnJ31RbIy7hcmCGf5uTYRSiDOVRFu+Rt1iVOowV5ECCmz4n\nfBYl8KbEQ9lYSEOmkBof2HFbJTRlBGRWmdwkVUoL/h/na4xm0+wM4uM+2DQt\nuqhf\r\n=NFfJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDv8ty7ALz8TdC5zwMuggeBCLopuHCjGOP2e6YaZzaypwIhAM1JFP/ZE2uKG2vAfrVWr0sC2rNjH7ARO2Rld6py8woK"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.14a172db.0_1598384892925_0.823396090261441"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.e6c1038d.0","@material/top-app-bar":"=8.0.0-canary.a1c65593d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Z0d2GMW9M5hwSbfjjM5lSAwy7y7hMbGsUGVK4EIvmvL1BkFbSQsBawhdmLM7D3y1mFkuMKx/k4CXe1VNH0rrpg==","shasum":"3316932dd1ae3b87c01279886ef52bc9cd15430a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.e6c1038d.0.tgz","fileCount":11,"unpackedSize":29693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAt1CRA9TVsSAnZWagAApfUP/0X10XpSgLMPcHxrLCbn\nJt9qTldoYIwcmu0IbRV5uueQ/11fu5Ub62K5ADABjTHnUrWmKpFwvZvGTeWK\nYyS0YB4VJlwuDcSZ4Hg/oDidjXhqnFKXac+kyMWKc+xhMnhdkZsW7j4vKnNm\nAEgw9z70I65zEaBjMclP0MHq5OSNZXj7o4+SLlKxq6zW6VJWf2hqJoCwRtOs\nKuOptnZjYVVyAMw8cPhlVY5huNhUy7jTIer3/eAWr2HjcI+CK/wOLXkU1/So\nTQUOr8NwCNS2XsC4hfbMI1ta3L6ZnRUpUTDJa5GdbT9y2MMQCsVsbq+3IE/l\nyyCh4Cp5snzm1alV2X57rX7LcDqHTN7HWuVgGS0MddsSoSCgCC/2Ezx3OvrB\nLsfqrHeQVzxRTiTUhgomVPnW/Fe96ThXOhhoaHslfzO6RjamXdJ0r5641Er1\nheEiqoGl5sCkG11XGdwTDq+UlX+FKYfSJtGtvRU5T68xFz6zQO/DqtYQmsqM\nJ0TAcP2q3kE2DGbRn+er7/r5XASdjqtq+DTtQk/CjrpbjaNoyqZE6Z4s4UfL\n3mUxzK1d4mAK+uIxjDUu4vnziK3FIwVkTp2nPmNIBsngHc2Ts34d6Gtsw2pe\nxukCitms0BQMYTxppO09VUFfBp/31ksFySC0PHADmoRe+S6IERLgk4x18NTm\nWUJb\r\n=vwCx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICnoX11pcIoFgqjP39hnNsXHx0AP9mwbtkbpaEuWXLFkAiEAqjfZw9SXc8q/qTYRt1UEUh6I61odMWZQqoflKATtMFI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.e6c1038d.0_1598557044420_0.4010657967190654"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.34012082.0","@material/top-app-bar":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-lUCku6Tq9yay9Ss/SlbD9Pvc464RF9yrPEC3Z629eBH9n/6RTih5eYvhQaYxsNDgj7SlNdJcTy+LgRcc642rbg==","shasum":"b892c0c2e3a9ab070c048033ed64013266075e64","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.34012082.0.tgz","fileCount":11,"unpackedSize":29693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA4bCRA9TVsSAnZWagAA5RQP+QHSIC6CaiAbusfPgVVt\nZYzOn86reV1ZXN1qL7ZS1q4lUuP4g4mwZ/JvcnFEOmD5bn29xFaIj274Sduc\nYN9Ly703CjEy+8Sk0eNtYfgWCyJy/jA57DgpTXGHTRr8t2ctoRxQDteoTegE\nHBHojOmM9R8Ux0itPLYTgj4SQ96iat7rf73aXPFINPPsh1SfdYS6CB7ale/Y\n9W3dpd/zW0nKt51IJ0bDlVG/R61J1rH+KFVNSuIVXGR2e/AtOeARLvnmUNDJ\n+FQXeOn6kSQbo21JNDTRvQpbSiRq8qO0wRJyVYgT/nOQNhOvjPqI0QBBVH6+\nUR1F84AuJvuJrla4r2a9xHImRXvrqghrDB01HgGL/9ZWL1L+3j+ZKje0MpWa\n2BxejS5vJNfzWTRrq5djXHkd8a2mqFR/MFmVEN/mxXCt1lkbnPq/pSCTZ2nv\nXKBJ5mLnCY8MRvyZHUT8LkRWzfK7TALYVKgJ7+sOgLuLxMTvGkwlEnicJFwG\n8QbF2pvlMqFqGl0LOnrchoRgUrRc+Lv+DDHwKbz6cKbbpefggIKN2pCV6qWI\nPWYtNCfMO1GuWJCt/uWEJ2+Foi0xGlgg3KRmaFGT3rW5ALKPXCCpcttKs+xL\nBqCjkgi1ALnyyzINrbnJSQnUF5WYiPfezYpQgWQGmr1QhpC6+um5wSsToaE7\nzdaM\r\n=wyuG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB7a+TU/A4q9y9EqJZjHYnAQ6Wqnzaaplp0ZkNBXG+g2AiEAki/QmaZxYzpGyXY54f5KL1r1I5/g5a+6W+DSoZvoX+s="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.34012082.0_1598557723092_0.8258272451011388"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.c073f7b8.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ZvajLpNgZLEdkgKYqT/KTlTV3g0eBPGrEgkjV1kRoB6SasnyrYA5hgCZEOwnsosn5bxvwKmCrILB7oZMWSLY0A==","shasum":"bb75c69e2df21825812b44d6ff2667272b6392ea","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.c073f7b8.0.tgz","fileCount":11,"unpackedSize":29693,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTr8CRA9TVsSAnZWagAA/EMP/Rof4ivGdBJZLFxHal8w\n9UyZsKo/pwnCRE9HluJWpf2z2CGkZg8sdqHc9XYTjUWOR5t+j9DNlrQbpxr7\n51xG+SVQH0GctG4F+8GeHyTY6/CJxZmDzEvKe7enyfGIJ0SKjbRb9zDVYIZQ\nUAyKzgpKFLaxIvMVJUl/bUcs2MejG9tkBq6ShtmuyggG+EyyDyJ/l5YFDZCY\nXj7Zb+0BjoP+Ww7aByKGroY92OjjoVyzWwhv2jF6bPv4YkzhqbOz8KqvGWl7\nfpoibAw6ajWGQKimeQYSjQpCaR1yBD+nE4KSC9tsRFTopOhoDfDtcr/xCqHg\nQwp14CPLABiYyV8S2uYm/gVRhEsH50Fhs4KetFzAdpBsxaxNd0So/0H5QqhA\nKbRp3oYjemLabqI+gqtLZJN16pUV+4W3tnE+WMd1Si0R8/ozDsjaKN/+igxX\nJZ4aHjXfYCw7B2F4U7BreuoBAIKaQkbdIZP2RTUGgpoXF5axyRMI1sPoyJO7\nQF2IJC180hS/7slcjdgO4CpipSVqmiUSShDavdkM4Fdkh+S080JWWvfzEo7R\nvGJlkYN1tKA94C1D8GUcD+UvUIofvIE2XnS/4eg/n0hf5hHt2vKNStf9tUVx\nkbbDC1Udfu+VniuxpnqKDs5LOHjCO1Spd9PXN1+/DjiiY0Xg6O7saP4HfdO/\n68id\r\n=bZ3+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxl8SMSheDrXy+HRwvhDSyghq2jXEb+g2YRFnF79nWhAIhAOxwdhA7qZ0Q/eEWokxHbekNEUOxNBSMWoITwOJuuB89"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.c073f7b8.0_1598634748247_0.19372435421755196"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.b7ae68ff.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-s8+NEc3uVgr5mRISTJEUyZs3zP3nAsJ4kNcTZETBCnXA6rwMlk5A47lxm49Q3z0UBfSDnufmlrGKkEFdYI8QpA==","shasum":"bcd2d1baa91846424fad1b45e60af36c6d750a04","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.b7ae68ff.0.tgz","fileCount":9,"unpackedSize":27275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa79CRA9TVsSAnZWagAAiqoP/jrkEZHSVLkLngvBd9MG\niYMtL3+nrgYgQOap0iZwDb1TTbJFJqOyZ2/I8oaKy18jROAfgkaPXi4XM03y\nidzKoGXR5SH4Oqh6DZzMleI+Miwk2uL/8+shSuIQaYTYSB1VZymBu/jSyWFE\n4LFpnIV778RPx5+LQYgUEGdNZERoT2lH4Y1paIZRA3RxL0ZB0mgNRhQ83vxN\nXzhHbmtdVBFcamLRW4eGUK1446BEUqSFLqz/oDKGV8RsmwvjA8Aqw1TADngp\nzQkSoHzqBWeoTN4CjRE/FWJty1f8mVuWsYrStglq0dD28ze00dwR33yuI++C\nS+54dAJlvhDivRoTZywgxh5PQUbcLm72oDhlXTHzX7ui1VyFbGiYR2L7oz1K\nqEKAvQw4DuTmGO/N+b8tsmkYqy4ps5nP93r0Fe2y8r3ksYArucM2WSlLeoFn\noCwBTdu/jb1Mw1w40VySZO29rceHzs4ZwjE0Sp/yVQlq5Al7CVOXY7OhCRDr\nkm/b2454+PN/oCN0LQkUhaFUoZXu8AoU063SP15qn2TsUaelQ4M0pAtp+SZ5\nEoypcyZJR6TExHSjkNCVS4dcmzfTtuHrPE5roN61BUp5FL31g4yMg/3GJUgy\nC2CEuKfCDaWTgYrQX7OvKJVo29E+Z339VbUfIsPW6zHxTMAOH+bqZnQ4+haH\n2Tqw\r\n=2TmB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTfZcIdp8gwq804JiVVBl0gdUIJgegdPTt0ywg/4utEgIhAPZ7f3pHYU7LamkNgihlhsCNxSU+b5+mgQjsGxgk7RCG"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.b7ae68ff.0_1598664444641_0.7636676629528913"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.697e3879.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-SRWYHk1G48OKYnckpNIfu4HuWYS9WhQSvXC0v5G+b+/IckXvbRsolDgUlgmc/hGqcwb6YRJxuUPPpkgT/zCqKg==","shasum":"18db86e96e8ee1e09af2a6075e57f62a8b9048d4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.697e3879.0.tgz","fileCount":9,"unpackedSize":27275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuOvCRA9TVsSAnZWagAA9fgQAKNbGMrQ4vDnXscEag4L\nk6eFI/uNyYMzmcTTxMYVKABTqYJ7OFsRAQlbip0VglDFQcCgDGeWJovr+y0u\nRSSewm2iQRS+Va/+tsZyc/bsyV9Q7vLcfYAthrJNxxh1rCYQG3FLnQhCBphe\n3xeWTATyDzTrsbgrX4npnTFynWtEi0aX/IZu+Gh8QAuz+THTrRjLr5hYgXA6\ne0bjBIW+FnvdashCgSYhDY6t3p1CoqSrqBquNHZOpFbCMJbGIZDLxCbahTNa\nKS7nEkUWMhoSvZQBB6ZhFwizQPZghOVCNbVY1jpPAM9XlSTKUNgBVNrwhWw/\nIDaJUxHqf5WCSXq2OpccqW+4C1lse5YERof3uXVrfsvNUYMURBmM7tF93UpF\n9tJar0i0AQo3Z7h0HKS16u303duq6boatGzQW5OmxhvREkjtq7BEx8Kw5doT\nZlH7/qrBEiL0+K9ZnSR3baKa2sYGJFL2zx0O5pEP/TGCnqKetcs4f4tsqhFs\nZBp6tivdkruxhwxiQzbyl61U8thFtyGJzpSCAPEHXnS2hWMQApICUbEGUYrF\nRwEAOHzf72Zhshsvgo1q6e6jPxlevQqyp+1Sh3QAh96F52fIgPTC+7MtBrIh\niZMmQozaOLc517IAUqcqR5BvcX2qktYVpKLLMtlU63wqwpLhcG2adjm75Aye\naivq\r\n=xVxf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEgGYy9TWGlcc9etguG9Z7euJwrH2CtumfD64tuPMCZwAiEAkQ7USO49jdRKaDZhedZs63E7yFOTZWkgYaEFdju+o8Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.697e3879.0_1599005615407_0.5506761496682464"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.eafb7991.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-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-fixed/images/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-fixed/images/color_ffffff.png) `#ffffff` | Text color of the title, and icon colors\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bJADK0LoLlBHvPFuwH+zaQXahHIwDWav7oXG22qpb3GNKTXdkPowjTHo3NKZjufpbj5jxu87e55SrnyUMQhSug==","shasum":"355bf55e7a8ac99397214331130617c215778cee","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.eafb7991.0.tgz","fileCount":9,"unpackedSize":27275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwD+CRA9TVsSAnZWagAASXgP/iuCQqrxLLyafuxvc/Ke\nvgc2VnuoEsKU7HLu36KHpMZCEB6z7pvr5JU4JGRgDZ2GpMPIUfHf+NbOH/Rw\nTdoeNhaQNgTvve3c7rpswdQYcGGVrjcnO0/Wk+BEeMnSV3XTXyaag3n+wgRQ\n930ahRBymtH8tfy+uzrt9dY95ZKkkPh1Nu/ctDfRtbWZLHxSwQeRAa4MkAIm\n05tOC+AKsIljoWZ2XdR+mqJsQXMxnLS/r/ALLaWzP+xrdNXlA1YQkS2SDMyI\nrYqkmdjFXQfe2neRejs3OC4mg/ny/4CSaivaXQFtcJfpDTb9zJ52cyezR4Xg\nmVkLah5Ceic/ZEM+UsnP3OQSvE6Wi/4pgEblV2wncadCpnHOPihBFNZit8GN\nZXHXivhqWH0UnW+B2EEGpiquM2C/vN8gbkdClk1+GB6/hVfqHobR9N+q4H3G\nRq6hG+3BK5sCGKqGWd39XQIre+6sz7blTrqab+qzxZxhSLT/uhVgZ45TU2Uc\nGncYRsV7LtNVjTP8AEX5uae/v1jHjS+ZZUxJKa5OArkrcxtQKsia2VG0xpiD\nOikbAIA4Mp4xL/wXHcqWFElSFDsKnBM5a0iNTZ2DxhbZajLmsc7ifDYyDYGF\nFBW3YZFGDZOTG2oDUD7MySDNev+I56ucJan2yHKLn3o3gFa7mUbmYp4jyRfX\nhRPA\r\n=F0BO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDzRRd00cttoyJiE+/BxJzX5DGfCBlpsRrMG9p48Lu/5AiBYyryNLpWjTfSYscgLGf0f5KQw5bwjZm6mYCLYwCXF8w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.eafb7991.0_1599013117798_0.7631589109493981"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.606642ec.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\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-fixed@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-CrDwOrksVCVvvpVnxU8Y+rNr3ZpMPlOGovtoLoTPkRL1CP5a5bvPz6qe9f38TZeFMi/9t3DhV8nld1NkyJchfw==","shasum":"e879ce315d208fb83d2a6221b132709c4ce103f1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.606642ec.0.tgz","fileCount":9,"unpackedSize":27056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBA/CRA9TVsSAnZWagAAXf4P/R/8nCLYfzr3bQR5MEZo\nIUqFeYV0LxCwVwsGSw/xrcN1+CtFhyR+Ss1QMS/CJtBRk81B7GSlVJ4I+S9p\nZXFZSt02SAU8+Go4rgGliLaR6cq9WpENRqMzjQOFPY/Ixi1DjXP4nNhrMdms\n+0JuDsb1AB/IrFeOW8ea5eMGb2kJZScu65j5ZeTpt68vNVj0wBiARZ5aAlXd\nT1ZDTqLKF4ePdICzNPNdCf1bdNcVQl6oYIlMDZVxMxgS+5uXDYgqLmiwsfCt\ncrrvUu5q+GYqibOaUTcwX2Wl6h5C2lPLR9Uydr5p5Is7wV8UONoT0yPo7DwO\n3gsXzbGcE9t0zFUq/vm/uTD4FWRaBLYTze9N5/dmqByiPvK1H3nQXvV9tBdj\nJmwXcobFAAsyx/WjGZBW6CTXoQlBvct9qKdCQROeXyJ/Z5yc8PI5+wW6Z7xp\n/OV25j0fUrLGUcBuG6isbxl4d+EoM+SBjI9doTPTPLLaOSUvOMf1vx/mMjy9\nVT7oxhqVx4U7k/UMMb3eMx3o3OfAFysaeC6qJ+ocBWzWLhA9UWMYogA3/Mdc\n55qxPvZpOO53brrYceqXQ9COuXeoKR9VAigRaoyAu/LqZJTqbfofbjQw1tkw\nojA/U2Qb0GVNIkxBVq8rmLKWy14MnjaI+oaIcsHZH8AM/ow0aCz2VXCcqqy6\noHQD\r\n=5Rs/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBorBvBPePsIpte5MkS7GDLcMBAPAWLQuID2M52A225lAiEA8KcOwPNp8AVgvzNu0w7Yvo5bl20pl8kWK2RtgeTQTck="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.606642ec.0_1599082559414_0.44296796239095126"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.ddf05c42.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\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-fixed@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-OUEmMi0slYmdLX+1/b1aDxhR9/mNsJqLWA9/OFLhpDH/eZ+rfEusR00YnDyaLhNlcpq7Y7aBW3IcFcA3EjcVww==","shasum":"7d7fbbd44a8a1328a870ed4c9d71b2ce1ae33fb3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.ddf05c42.0.tgz","fileCount":9,"unpackedSize":27056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPVVCRA9TVsSAnZWagAAK8YQAKN0Yx/53LWxg505yf2/\nwXmhqtD4vLOkzs2SZmFKhUWVYFICWmErmtilAbmy20sQVFhleRZ6mhJw1hBV\nFRQaBX5jhLzE8uJiR3bBGN1Z72gj8F22mxtQWtzwaKcOyOYafqOgGrFRpOyl\nE5rnrZQGEIoWwSLtjhj6X8q6/Hqt2379i4M2WHOQHdCkOcCFXlr1IeBorjP3\ngAsRdj5yr6+ARgJseSTVfzpNeqx8/URYojabVHyBhzFoYNdHuA5oJLKen2ZI\nsUXgw0WVJBQ84RgFw+Zm0PkfN0nmL5gjbtjgJ87uLz9usiWRzeeL44OpFVHN\n2qAapSezimHas7iwCTzVudTRjtMvqYmV6tZMdYDR22Qzz5nX1RRtr5NT4tP+\n9TbuluiDnRRR1wkLZqyJLz1rcorGAnUupAluloyZqGpjLLfS476nYyzNi3RK\nqA/jlwm4yfnrkCkv5ZPAO6nQoNzxayMIck8L7JcP9aPGDUpVDlWxd7lGY+yA\nUaf2Wyk9vaZZrHx5hR1aO7s3SHrlKPflKlNdl5y6fbdVw+ZyhD9XyQxMPDsk\n3UntSeEbztC2eyyy9HhvlO6K9SFXcOT7Dz12mCA8dV7Dq5k7I4fUSt1sTACB\nkChrCm+9pTbAZJ9L39SRO1CiwCdcJPJVOMSFIWmtnUQaJ/rP7AacGoNOYaQI\niIIh\r\n=y46m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCa311L1hpYW8XgXcAcjBComMNBZMzkGR+6cwb7dMo+XAIgXo50ajI3iap+jR9gWXd9AbwwsGrldlwWoDTLi6edi3Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.ddf05c42.0_1599141205077_0.2949218551971933"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.b889e6dc.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\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-fixed@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-SH0IeTXN8CCGy3Et9VFL0pDOOdHPv/eRK6o4CVLco7OxTUMGh+2uHpZiLdE4OEcfdekR7XA9pemkH5oCI25HEA==","shasum":"c9b94983de726a07d38a5f5854b3a35cacc71b9b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.b889e6dc.0.tgz","fileCount":9,"unpackedSize":27056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPmZCRA9TVsSAnZWagAAF1gQAIfMGm6s2Fvs0/ofH8Ge\ngStfr0w1K5cq0pMl/FUPoz/NquCllCwr7Y7ZGCkyZRG8QUu5+isVdpclU1Jn\n5hLRrzjPngcPMhEq2iPc1vq8ch9SyCyEc4q+hqTIpGS2AjCowOBF9Z5h4Lxj\nplieSdEcoJesFQqn+gmwtDQwf09VrtNbxqRUJ4KewOX9PDoNNF5cmN8WKI4Y\nN3xdA+14yHdfRtYJw1918Y61c9QSYrndcywdfP4wQcYagSQwE0jStM6mlN2z\nl1TztWKFWVm6oNCB61BW2UD05fo8RcGo1l97+10MQhw8jVBBdY41X5LcPZH4\noGoHoKEdZbmMLKUXAuRogPcliLAwrfvr5ChY3ORPhgdIw2wuolzb3eFrsDEL\nRPRsREZCJcKCSNfPpClxMVYjj4RTUEcW6POdePA1daWrHDkEY+d/DqW0GWjk\nlSANDwZgObmoyqniUF739BxK8+mDME/BzUB7BZ9oFsD0b7/A65yAfXdJHtJg\n6vrtXOmQi+KL55M/8a6pKNOWBWhJAgYMAbjZ/bU0pfLBMKuS9MnvIUOPjPDA\npWI/3X71GD8fCgWcsJK2eFRCwOZq06I9vD1VBu1ixQ6bqEQnlBHwucwl6mvH\nFJGm8DouxBgJAVuNoxf/D7/8NFlHDsWfEPZ++NeFD3esTt7CpElMDNCE0dj0\nwoEH\r\n=Eq59\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkS4yb3XGgqP5/cK441OnWTGkQlzkxzQs0sdaWsKOmFQIhAJU8AcV6tm83/i4efZFsVNeLEePK0LUN/3W0wyW04O9l"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.b889e6dc.0_1599142296803_0.8412763771147551"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.aabeceb0.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-trRBX2v6lt1DHWsahipho0gfowsu8K9G0Fy/J7EXrME5vHfOUIw2o9iIDxFqY92E6YgbX5xZeZIg76d4uMtGbw==","shasum":"a109799a3ce4d900a8ff5f39d479c0bbf91868ff","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.aabeceb0.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUrDCRA9TVsSAnZWagAAkUIP/1RUMV3FeyvKw3HmkGqk\nvtA7eccxRnShfeIAh6lYKwPUIv19sLNmWovthLLzNXWiRDV8dVzXvyp/yhhL\nAL9lUk1ej5mYovTkf13C7JVzxqzyeyYeS9T/0w5pfEkbCltwkZpZmngmnWqx\n8fh26Ddwr/7l2hD8fHxHERJJBHPdovix69aAKb3RMwzTWqvn/Vu5LmHtrJLz\nQv0Kdh+hD/1/08xsK4v97Uw/S2FKrrwAcsel0cdyTTTHLoY3UWk8qVC+5WdU\nqWo54bgljxkGAq8wINeLO1ftUagtTWn023IKp2LH2LfEhPSHrnUvHWkQa89W\nD+k620u4PrJXZVht3Raoh6nZ27tr42scxtvToraD8sb7cX+n485eOvcJnCVw\nMmrkMrKpy47g9juQ6OIEDVjO7EN/H30oKNk+KzPrfFAv6bpjeSUc0m7/5DY9\njZT7+QjOQVhJZwEDThUuO8ujVuOtXbH4mA52rSxtkV+NmQXEGZIb1otcOO4B\n2ds2adlH/uRQtBqHFpFkEwqHIbn+py+1Iywu31R5U7Tv4mMEW5z6hYQTD01j\nrtuLQN278qEqBjYbCk+nlp8L/omKIVb56OY1HNDYpymZ85n7iSnYq3v3PuRX\nMsrxhVT0lV3pCiQspIit2fbSP1rOIWK/7Q/NzDb2llyPUTrKQVbWJJRboAte\nKgIE\r\n=kC5k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwJ6l4PBiVyq3Ej0kjg6fl0umR3ppN63CRo7ULdKx+agIgFUokZaXjggZ+fCR3h8TwQK7lJDorwG4b4iPPMPFjbyc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.aabeceb0.0_1599163075192_0.14455021767992027"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.d8cca3a6.0","@material/top-app-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-FLb8sAiz5/Y6c1iq4YeeGh+Va2n/UjbMpqDMlgPeaBtbRwaOtxtABlac6Nfz3zh9HwkZBn4X4kdnU5gFThP0Bg==","shasum":"6cbc1d02b46a59d15d78791505ead6ce79271039","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.d8cca3a6.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWDJCRA9TVsSAnZWagAAtcoP/jl73FDcmQOsQOx4KvT/\nALCyJWJUMmj4ZA+zx6sJUeFoBp6VY8FMb0Z9y9b5nLErfAZO755JYlAdtcFu\ny9tEiJkb1HTD9DSyLUWPFIaB65tSy4yr0iv4FGUGNm35zLzeORJPX3NpOLiG\nz2/ySjsYLRqJUSUEuZ8Z6UICObM/LC1uoRLb3n4zAfv/m/00R0OUF2in0Yn9\nOYK12kaiwdW9djQf5APIed7Envkx3lA4+r2ks9B90zwrkEBgPER/8xHv5JOs\nhAz8WIrPwqJ30unveNriGtF14t1yf6nrotribPJFkA/zgfBk0ZTom1NqLaqY\nf4Da2kV/LLhtGZ/6if9cEvGV7sTl243rcvRSmxpIKwMh9Trg9FBFkB/CKBhp\nfDUbcyXn0Wh9wfr9rcVECjBMctAfAP/FPsDL6pP3L0aZJAOeT8eB2dCNd96a\nD4mCzgm0SRD63v6RCLP696JHPQzm8wvoMQciigq/Jg1FwTFoTXGBsurSk4nh\nBf1fYpG5fZE1+N2Y361QkFToR4p+458R4GAm5ZgvvvJDrkmjyM1r+U+o+36y\nHWOOimvm+5Ecbc/g2IQdhVTr0xcXb2Bnrqm1fs/PwJbdtLCgutUVK47QpXlP\nYAN9EjFgXIhugHuqWCoRjTbuN9LdcADzaR8znQa6o7iAxcI39zfkY/HDzuWE\nLIIo\r\n=8+4f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEDrcACXJGGjNyr/DqDhAnyqOFJMO0mVcS85TzC7yw/MAiB851kW7e7MspW5Lkda5XXjA9VvDUaCo7hCRdbjqH5N8w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.d8cca3a6.0_1599168713233_0.7206522440704626"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.26d34b2e.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-F/R7XiBUI3C/CokuGcBKr7QqKE73spskKpbIF/jIwl6msFCZ2LywyOko5ehfJnMU0FOR+emG+lw0niiR9bDyvQ==","shasum":"fb40cfd24aeda92365aaacac34a31aa3862c2326","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.26d34b2e.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWa2CRA9TVsSAnZWagAAAzwP/A//gDL0K6S9xC0J3q6j\nEv5UiC1YqXDVDGIvO5/LhQDBw8XNqi/PEx3pVVDe2JwiUfva5f8fVJ2UfPBy\nwgelqOgEbyaxtIViXxhCP6S+8bcglLo4BEifRRNZapdJZcr2xmtNdpoy/Vxj\nF0Sow9UbdJr+pVR6xxOuQktFdp8qBkYn7GqbWNt8IJ2kj5ZqQi/zSFMuK8d7\nksP+fLYDfU/mcgLqRWjAwuprs7jN7DisVHCP3bsWFAkWk7y+W0z4yxj/Ac/2\neh9yvoIzt+w8rZi1sloVIEhvsqw3Wn37lyIFziaRucSgu+JDnM/tX+pL8JO6\n341ievESiI8zv7NRUKRFVO8NYBgsUryr+oD5Dgna1+6j3njrysRc+19cLeLl\nz5CpvvaZ3MqM9aW3uh3iC1dBqsbM2ukzc9uDf4aG9araMauYg5TifImtK63i\nTLN5hn2NOxN9oxm505LXUdRVSehOoDHdlmafOsSm3+161Emyl3dgPmuA8RWt\nEXnQgqTbTQjgxw5fGjuj6lqIzJy8F+4IGUCy6YSSkzIf0u5GjfKvDPy6jUeZ\n5c6Hj9E6gS6VWbdKhWMKqo9EVoBnv7DjXFlNvvb8UZWSYXnRnrlTW5trXiH4\nQeQJSm2m5kYLKYeKBvJjGdtsY77XQkgqyOi9puYll1FYZ2iXGukDOXKo0yuM\n/PCC\r\n=QNIy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDZ1UOftCXCQk123WodfozDjqoTTGl/rxfSffrcUU/+9AiEAnUGWHKdDpdqPtLS2T8qh+wCfL09xP8Brk+0RBd7Mg44="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.19.0-canary.26d34b2e.0_1599170230489_0.02586971823279116"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.a1c44494.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-DSPZHKbWurMR/8/oTwbM9R4KabUHgy6S8qzOjzP2odh0OyKkio54zLCa3sIN0iavPOzsrGhvKCEgo5yCoDPtsA==","shasum":"6943d5bab4e2960d8c3c9552da6e9e500ecac998","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.a1c44494.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVI7CRA9TVsSAnZWagAArp8QAIvEXldfiyNTTWTJhbz6\n3d9zRvOcSEq6ZEVH9Fnn7zxH8WyOZVW7yDtaeNlY55LpVGlaiPbXlaybIwQe\nSFJE8pLdr64GI7O4wnwX5+6IQCPY0ZzJBby7J5whcLafLkfh3bvsMA+SRdep\nZxHqcIAQB30K/T2gZLp5bCKLkLrt0du7eUnkAFUcjQyQBTsPzCAuSn9YNVhf\nyEkPj2bOFW5Q67LWJ0qjqPjm/k32A0DyhPUVwAmZCuzNzBhQrX2UavSKQURi\nY8wMrpYOkOFIJqlwoozQEZt33colLXh3eyG4QNHRD41BxYDnbzIso3TRkCf9\nXl8BmODyNZMSqTQNCnFRfqc9HTce1DkWKiaUwrtv6OUhnb6RoPKtW1uqfMEE\naHGzANToTW0JLZRy9OGRRfpR1TdCjIqNRZutt7b0MboyIAED7JTtXPIqYr8B\nyFJob3uHNwRGpmHhHT+KsEyOW4/bO/jt80Z/YQHdlCaYZY1RO+k7n9QN7jb0\nWWMcgn6u8s05KNJYpgFRl7P/VIlL0Lts6gnD0UNM657n9ozKrtndCGx7U8M0\nkca8PhoQs/UBTZU3xzUVKCObpfRzV1C2EOHOGkxXtkx31vTb7wF83f5StuTV\nd0bCS8DrjFjBHvT8Q7IjGwUk/+TdmIU7sLfH0FG7VAn4groqoC9+86Y5FEXi\nBwYK\r\n=eWL2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYV2AXDodn+RsHUZaVybo59Bdo0mzdWy5EFHgiNa01rgIhALqxNrJROsBsT+xFe90DSUbvh7S92rwaUyqu95qaN5qF"}]},"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-fixed_0.19.0-canary.a1c44494.0_1599689274997_0.6754830477793734"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.be1cd1e9.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-AaNxJAE2qgVcQQVENzufGjzNhUn1ulQaagjgqS/busl6ZMGQPJI3YpbxRepVm6v6VRvcjyrl1ZdJMut/qzidVw==","shasum":"a63919d367ac3a2c0e419f5fddcc4bcb1b363786","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.be1cd1e9.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWlc2CRA9TVsSAnZWagAAKa8P/3jwp94DdEABoHs5Fnk5\nNIxFZjNlfY/idIu9ELnZd0hXRDZI9XVrytbT60LLUnLSaSd1ciRo6xX+Lamu\nS+j76hB+gO8KEWTd8AxpunbARIfqkG6PQqfDflw3qmtqHe3I/unHg1LjLqyH\nQtnR7/yhQYZm7YB1RMVlF5VFm74mRzLqKCoLlBP9RnwQJopN9hJ7OJCousYG\ngtmi/c6BYob2ovc3ybQjHeb5RAdGRtVsiAZLxp2Ul0orT1i90V6CLFd7cA1d\nw8N+/o3tyrduIgX0LA46VycPqoyK9HB7s52bGH4Vary8o27DzrPig/gQs0mD\n2aUUtSiye0knu5H64Ki72y6PoBwGtdFFvdWW4nq5+c3mxKnep0FShT5PAf3V\nrNIjhiffzAs7bu1M/Tx+piNAIFQqvIAeX7udzrBqNjgVKuTLOY9q8hndPvsV\nY4gUcfCAO/xCouJkatZpAo/WsLz+VGjRSExKdHDNtn9gAV2GsUr3z2tnhyJb\nAJgyK6NAfdmSdeuiqahrzWcv/QQegkF6yKwI2t+SwJhcPd5BVq4+ue9EiXOR\np6hLkij5H/DTk7urlhVNla8l2dlET+33Q4ukKHxWfwPNxoOxbWzfWaDWXLH0\ncippk8ZQVnP31Bzv6Vt9lUARa6h203iRcVxewHk8Q0CLzmMhjkZ2MZYFqRuN\nX515\r\n=BFSn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGEEKxt2R6hmltbKOA+cnFfPyt/rQ5I3SHsh+9G9/jNgIhAIqaO5qG69wJcNT/mSgwFT9ADyIoPD83POLKqNo4IHzV"}]},"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-fixed_0.19.0-canary.be1cd1e9.0_1599756086032_0.05337286668864527"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.f094c0ce.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-MASUQp84vIuJC41Mk41hGqRS4H4BtpMD3CVDz/i+fM6NVXaYEAXVJa4Ma72qpsDVu4UrgFJ+xjtCT+aa7h/ITA==","shasum":"35b722d6b758de0859b1c4a376d01acc319cc16a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.f094c0ce.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmQhCRA9TVsSAnZWagAAtGkP+wYdUZefw4cJJXU2jyps\nVUQm2P/AdoP0Olv1CsgAhsSWp7SHQ5GSqmqi3YUfeHv97Wiijuwf1kD7UZy9\nAIOkFMEFKicLQUmB+SuAsV52gzUy9wkp7o63efmQcR1tfEX+Bv+vbWx2QNhF\ng02A4ROZFPVnQLOA7ymzbyBVXqCWtkr90xp5sVgfBIr7zWwMLMVyImUYXj8v\n5jyPDkELMyBv9WPEySDrs+wlct3YlrFQoiAYZuIwUnuxny8oXebhgAbrRg4X\naBXc1qeprkBt7b8g54juCsJ1bWhIPgmmdoxif4+0BXujxKiy3x7qRtkjY+cB\nhgk4OfWb5kvERn10YbL3rnYMxwyKcK6nTa7VdsY3v1w3kb5wOpbPTUGUiedB\niTWXL47lPOK67TWkss8uHCS4fZrFKwbXD9qFTgNcNRRzFWjWgLOKome157ha\n8sBg7rkXoIPkaujR6KGgpV7QbzkYQit60doim8oJXibHEctHsMZOzSikG5fL\nCkpnKaJpv5UgBaXi2tC/PK5YO5CIqdSybEfYUwUpZMTxGzp+noMHgCl1XE+J\ndLemYqHFZ7RDovzG11FpW8oRQgKGyfB1GUx5JHVczDU+fphWcGLYyKssPg7G\nwftta1ZvOvlZqLl9smukoTZEG0g/nzhFi0noMGrSui2H7JwZgrhnZ7tUGGar\nG19l\r\n=oumM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBrfs7IAdfQhrIpEF/JnC/Wb3H+0fqqOb/KG7bu4SHnQIhALoz5yCfVN/x5YBf4PArzPxGo7Ar8yflcbQ1s9c4E9+W"}]},"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-fixed_0.19.0-canary.f094c0ce.0_1599759393343_0.18791666994171474"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.c1261e7d.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-a1QfSVjZIkoWD9Yqo0b0BnwkTxRtnfzn/veh3SqgxuuqSffcAm9SvxUHZ2DWnH37HI5E7yLe3rGlk8qC8gwOaQ==","shasum":"cb33e2d1269c576167ce2d0acfb3c80b697b3e83","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.c1261e7d.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuBhCRA9TVsSAnZWagAAkWYQAJcPyO760GHQwkrQQfma\nVEEp8iv8prfzk1EYrSynmBDf6UYb/KqixSNFPwiLIAuDGlcHuFZ4jsEa/g1X\n20NePgSwV1Wi9lSPIahGKN2Bg2/Z3P+npzUz4bXPuEqdd/jcBY71KjdB8AT9\ngRE2y5BrQyNSRaAXHwtxsUIhsFaCOOUOcvO1emV3DOqgiQZ1GfThJ2UpQrtC\ny0TV6e/LDEFXZBD/rPXGvQ1WTQXJFSpe+TsLrGOHytk0Kcpi0Q6pzVhhYyHJ\nlTbSCzZaT6F4dC+pZIrFg4CAD7Vnx+q51l5kIQuuu16SPWPMkCLGtkvtX65U\nIV6Sr88er2RAdOXg7Ao/18RiHejgpLdLf5SfrQ52+6RdaQsxXZ0E9Z3x7jLz\nCI3STzIPWeyNIbw1bYk/svMh53/JDQmk/BkjcSiZRiuhEbu59OrqcjwEfamk\nZrJn5B8ZNMPxag2fEPVlcdn/sKqJq4T7RCtbCXeOyJKnuEfU6asfz/dQuVQ2\nOU7XnvNiMSTc4nyHR2MUdexOb7PDFPS/0hElhzhkuqSHlxITNXcjb4DBXYBS\n6a1xw/Xr1/qufdNSgvR+TmYtkeGq4fBYp++Ny2Wtl6Jw6pK4pi8a920QnVTI\n50ylvJtVkXzyEYvpkksp8or2YdHTkf+EI7kWqk1ue+SUcOfQqC061f/Apwj5\n14Wz\r\n=WiUa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDLaEIRw2f4TYeMAiwsWCDrR0u+b5sw040g4BA6i2Ng9QIhAKWB/LCfYHks0bI2fixVhocySV7Toq/VKlOJU90hKASd"}]},"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-fixed_0.19.0-canary.c1261e7d.0_1599791200850_0.8573652631133679"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.9b39ed1e.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-KtiAhOdX8Jnp/zZsvtCcTj96O7quu2OT5QGaugZLxmf1yC1aEaeWZLR6i8875sXAhiVs6QLcacCIfRgMf5QkNA==","shasum":"356336bf5fc8b96d29e8c4d2ae1fc6d25b37e63c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.9b39ed1e.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuCXCRA9TVsSAnZWagAA5VEP/1x3JG86gO3VHmoO1suf\nlJoDhFhYRrMgrAat09sxBtUKemh1ofNg5EI70VxiOzEomtyrRuTyoJQ8Wm02\n2jgauEMn+0MAFplg5A5+P7AyVP2nXKwrfIcmu9lQlB4lo5pJEy0j2d32P+dc\nP13ykUgOOLDf1niLgmupYxy6nRn9tohDWGeB0k2IOTbUS/5B8sJ6WpLv2zvH\n4ic4dBLrrvyaI+HJvAlbtCKetkSgT1BI+K03wFJIUzatjaY0URdYn7D4bjWJ\n1/pjk9lKQ+OIYolK3s8zUNXtZsCD5CfNk8nTy4hD8x5ttMtOHIW/anlX3ggX\n1E40/NN+YnxgPb702ca5SdOqKaeUgNAZuyaSOjzq/A8Ufs3iDtSSjoEYENE7\njvW8aksYIzhAoT0+dVwCTz1/LuneZo1SAdqFz/l2UqSDFZPxt0UU/PLmTude\ndNKhlVbHxHtEUtKE10DQK7VOmin207fObiILrCHGq2L1LS8F5OOC8nwADOoB\nWRly/GNAwBTqPAEWl4dgXHY6ylWdeWjopLt41e5GmIOZ39Jzed6g+sixYjtn\nkgRgzIsLg4uTEQ9rP6P4hKk8b+x3/WbZcA4SHr9aUYnHEPC3Mn8zDbflbwaT\n2if+HO2lfresn/nUe42JjXO1ViCQY8J2IyV8SoXJzZ9xJds/xqd+GFLQ0jDt\nEFTA\r\n=Yvgp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaxOsPvevfjSHCA+CdTr5ys37M4jjsNlWbwvVcwvKpJwIhAMRy6DJyyxj9GoAGiDJqvMHXo9ABKRrxlUy2EIF9r+Sh"}]},"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-fixed_0.19.0-canary.9b39ed1e.0_1599791255555_0.21907925930666838"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.e67214b3.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Wy+boELlzhJcF6no+YjrQJy4DhsTNWM8GUsQMu9Ev1TCBwi0+X1eIsHQrLfEfhxwbHvMwHBJzmxarVBsbMUqWQ==","shasum":"e9d4deefbf0f75834ffc2b0f269384e72ad59e2c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.e67214b3.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuGYCRA9TVsSAnZWagAApJYQAJ0sYtu3iaJl3d6dWIf8\nt5mkJ+BOQuZK+tCVX/P7iCUb80U6/NXNeznVFrynOtd9QioiWriGRPoTaRn6\n3dtItu/Emo7xODcLPtSnDyAXiHC4lFxTRDSjOIkanh0rU0gjU7QdIzm/ina1\nqBU/sZfaSZW1bTt8dtLR82/0+p98wnyKdApkpo2UBodgNEMlxbHkQOQw5pUT\nRfs8j44RVep9lmMR+nOI0XXhr4W2ceFRdXJU2S2R/TRkY6l/dW0ounVAxRCc\nF+qkmUBfHbxy6kJoBpwl9qGxR6cwBCrld6Os6N5pYaFqRZmzl7aP3Ha6oRdP\nkMwSQrvnighmdAWRUvLSYs4Xau5YrYeOUlKBYkEBD/tcnntG5qE5raqBD1P6\njrrfMDk3RemEBHZSeDj0ScqU4zwc6lG/kCLrhn2YwWKKNIAfgGSZomUmXOVc\nMW5YXb3V3tj/rwdYRQIYQFiKoEIN5cX/xQZzL54IK/AUv8Qz46QpP5rw+kMu\nYBx8Lbvdnw1scLEhTjEMZEMe3N0F77TLKhNnj+oxnBDwAE11NwAxY6ZWVZq1\nfEonO8WdQeAG9KgMPv1kVKCbaMSRWKFJEmK/CmHGxYckQbtPckyuK1A4051b\nCRVNoUaC7DLs4OLm5/Q92+VXB/7vt7dJmmzCrasL7ct2HonnT0QosRIpuz1/\n8z52\r\n=k0PU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzpEL1xFadX5fDPCACpWfiv5A2I7RppwOuDCxrYRZ/eQIgXT6c0RKt36FvkiK1pTVL+X2lkNXTaYz60PYOUkJRmYU="}]},"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-fixed_0.19.0-canary.e67214b3.0_1599791512407_0.03601355287927377"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.36f5da28.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-lqa8G1xMs4FVfsFppbyODYvENCewPgQpVqcMqfDm+HE2WAm+djyKG9ln7ZCbG3RD2iNq2VgdoOLdNvnF904Huw==","shasum":"78e3df93cffbf9820ebe827e91a975d70fdbd186","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.36f5da28.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuI6CRA9TVsSAnZWagAAMXQP/jQjGNWwHf1zrk0qfdID\nIgToK3iDfk2BmDrpdp2MXpuxUzQkpoX6L44Jm6+kchItSzNLTh3a0ZwdMVfU\neW6IDPAGhZhySpqFao0DGmbr0f350FhH7uuAZ71j97aVR8egzod2MwLeV0he\nlqLRyGYNiBfTTRNHdJeAmHjHjqDZ97nXqFzMTwunlwga6AFRXe6j7CBt0CI8\nNfAP0B4nHaXYwio5Pih1L07dxgV1Zjsf0v/FJYkV0RwHeuaQ6vvwZOiRLESZ\nlPp7hS+O4lQMzUZ7WMRw5rky6UcoX4/TNcw6gc34FnpA3p5w0srr0akO2ijl\n6Z5PhdQJxLyIRx84ZryJJplOkTps17RcMgnwnawiJXQ85EXbw1zeNfgK0SwJ\ns5cdvyS8ipdFlGiaEhVUg4/0OUnlzMQTIdViKISKFBuALsVad39gJsHR4c/5\nVDC3V7cHlioJQO/C4gVLJ9TadoGx725JMFZVXqUOYtXLbTDqXyC3Ve5qt3bs\nJ4EbAEkuUt9/y40mdtekaT4ZpMjzJgcCpwd1oihtALixxaHWHXP/215wZhAP\nXG0lVwGoo9UvC5AzXV4KLB/onNGlwTfOReRoJeX/vKCsYTCzgqHXGtBdQb/v\nF/AsvpsOURdLjlSa5cO8MVSWoYklutSagfiSdWXun3DZidsgUs2+CgYL6S68\nV/NX\r\n=rYIO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBfkfkxp2mXx+zOWjWB0gjWpHpFdT/AifMz+J6W9+8TMAiBIAO2Ggew6OWoZT6jp8CdbUYh+Z5GWgTVf5wlI5zR4Yw=="}]},"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-fixed_0.19.0-canary.36f5da28.0_1599791674471_0.41862413797842524"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.3babab12.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-MHtiBs/nGuiFI0e3yu/c4l3reYnd45ev0+4XjLl6TzjGfFZ1TGmfTbJsDXPOHUbpy9dYAwErwMZtfzFF2gRVGw==","shasum":"e1971d0a5c212faa146e00f2090da6f6b2668dbb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.3babab12.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuLuCRA9TVsSAnZWagAAgXIP/A2dL3ouU5i/9P9N1kIt\n8M8XIk1GkRM6aj0ZyQ/2io+gLpCzjTSPIw2cXnArA4zSM1WbZldjZtv0pR57\nlCLYSTFopV1n+eDrhF24bhZsvoTLvbe8dqRf89uR5sb8TazvGGG7HKx+MP5X\nB7W+if9X4QyJsd68jPjnE+UOpwGxG/3KjdLIeDsTd6D7T3ww6fPX/oxUDXz2\nDBJgc8snUoYGDZitXkHiLfEyG85Qavvsbh7MWt2Zpt3a5AZgEiYR8Xe9NzTS\na3iG793aa7wb1Cpa+LmeMkDvDzXg0MrWmFThd5sPY0R9fUdQAlmNE/TH36H2\nxH/67WUrUKO2lPRXkI4LRIMMTKV4V/vLTPTi2lf3kHb6hA59y0FK7Fy2WaLY\nSSfBx3RFZdnaD/54RYNlvsvV0Mu30RBdt2uSopxF4jq/jBDQJ2yooFOH/q9W\niWvfCuQix0QCqoWqk0d/WSJY+CJ0x+WSSf0MuigBio9gAHJyWCElUpasp7+P\nW3U0OMF7hyUYhbG7kj96Mhx4m61j3dPLq4ToZXHZd/VAzJI76IiL8l1z+MYG\nJr7i6oR+r3Jon9yUW3ooI+BIEHlUKVnT2j3vxaqeMVrGDN0CMYVO+QbqqC1p\ndqxqW0MQSTvtIAprZLKAK/91Y/t858qHx+kccQGDq14H9ZLN/6mUZmRNIQzQ\nED/l\r\n=mqTz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXMwMnaJBwIZNY6nhvwDzhOfazIgi41r41HQLiR1n3RgIhAKuAEGGXma+SbkfUM/xCiJp1C23DS7N5k+JWO2piwFJ6"}]},"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-fixed_0.19.0-canary.3babab12.0_1599791854290_0.8586049707610977"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.a4481e6f.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-eEjeL2xhlopNBseqN9j2GpOCTY5ZwdudRNsIU7RcQZcW3yLWiv0N3+xU18GBmGkq6nOKWhPQkUfCUCTWxgjdkA==","shasum":"b88aaaadc5cad60d6a7ce7e0dc3d5a076031c607","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.a4481e6f.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuXECRA9TVsSAnZWagAAnkcP/0bjZX9hD57OCtTTD6rR\ngBzRuBC4LRvzMNmT5tF6vSsTasRQLJTeEeiS6OV1j6vue+HUmRvD25G69Y/T\n73gkiuIidMskRicKgh3Xk10k1W5TOeagrZy+ykQdidxsNIaTUeCaPcEg2rMw\n369AZMgo3MwjYF1LiYdXU8iwonZ23DKMWjong4qxqmEXQp47IqTIqvM708gU\nzcZCcmZONn0cJ1DZrrfaZFZho7KAvtBEkJEWy1lfaYCKLDGptwQKUfSq+qPC\n4sm45j2MLBaCZHkKLFCkwbF2U83JkW958HkknRBOUGQB9XHRQC1eP2Q7/kGm\nDOrDOdk/24HbNehwqkx/cOZtP/IcB8IBfWNKKD0I8NdygQr8wpdSBiNCp/17\nn1fmKd4CycCijjICD2+FzLVS5oz+CPGSCv6qRUcK9kv/DidNVtbxyrtBiHKS\nHCp6YYppdRq54+HioQm/RVB2Z0ZNANsZI+MUGoA2HtH3DsZl54HWsIoa117K\nQjrpF1764WZUmkX1EZ2/i1mWlHeX2iaTxPYapOxr6g+WsyfjhTsw+Sp1Ncxp\nG8yw01RV2Gm4edy0HSaZnzGVfEIRx0HAZ10nzxTUTriSunP4QFB9z9nTYynr\nFUDiduMxngLpiq7uW90twPp15onxoj3dyfrOzNlgRBWMG7p+i0MyYh0m1pfz\nghVf\r\n=q3+O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5FqsZmG/D2GSHqEdX3vQCttsTOaMgU7ZSCMSo7hbnhgIgSSGd1HOQa/E7uGShwE80HRr+yhmIffZo2AWVU0mDNU0="}]},"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-fixed_0.19.0-canary.a4481e6f.0_1599792580207_0.320547832176564"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.a9177836.0","@material/top-app-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-1tarnz5t7Ua2e68LfgtbBfjDXwwrXu34ZfURuPBeQ008cHCQnPpQP1oUFy5XGfHAEPBOGljj3L/8wCSgrU+Xjw==","shasum":"20089d2e4258b846986be2ddb4c37e643180f0ea","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.a9177836.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7hFCRA9TVsSAnZWagAAj5kP/RLinExASlqQTrLPchTj\nExPv/7l/guLBoj5z/qKHNgl0gwivoWXzBISIFNZypr7DEKImiuqtjRJLeMbE\nrvjyXgH4vl2vIClNmi/MQX+28UID3BNzfl8udTK2mZsn7z07H7qXVZ/ws9ia\nMbXMXjcQfLMRFYCzaaVEYlm8ZUWBSh4rAuNp3RyYB0vFfPBcwFDo06eHp2X9\n9tmfc3SUSGLtZcB+YftPgts5MF6B/M5T4tv0xKK/qzbss2WDYWHTVF2ZauB+\nSKA4CgzEOA60dSbWVB6tLWfVuCDYEM3Zs1SLLxDTGymjrrWxqlwZnXAuJ0P/\n5Tqo9Ruu3A5TT8GSgV7AC3qAlsqWFTzJw9wSr6jpQnCZvqNVeBofJISa4kOG\n3Y8xkMTuf6dMEWNRSCSphMxkag0snaPJzN6S/VHqPABFcB+f8J/Ndq1TO+Ux\n5ylkoXBR2egMFo84GmLrraFDcmY82nz90g9OfmsiMdv4ig/5vIX6AYSIxuz6\nOznTyzRYEH8HkNiS0RKmW/tF0m/mBpCQlJy8q/0nFD56hRRS3Ggm+Mfw5caY\nzYZD685e6FYGFBXeFn2TJNbyHO7d6NcJvLr8U5gAVANnU2qk35+mtkyLCP/2\nud+7VnAelFJ66SuMLQNfK88RlQku7QopLRrgT32mQQygjarUXSUPH1H549G6\noecW\r\n=36ko\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWT/R6Buqhih6ZoxTsag2wP9/RbIc4f37sV5iIKncgYgIhAJK1tsPATq/j7110tQBJnpMWVgA4DXYYmsv70bTG80IK"}]},"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-fixed_0.19.0-canary.a9177836.0_1599846469203_0.5879106827711025"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.b102a3c8.0","@material/top-app-bar":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-60ERvpcBX48Ge+ugjvmZuwWwyJSFsBvYQoOVhP9oWdjLJ1XFwrPaoTLYxDwt4Zt0vEwQOLsyUmmgBl/9F8jITA==","shasum":"bc1ad9e19faa798e9f28137e7a63c3e75932e7cc","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.b102a3c8.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX870CRA9TVsSAnZWagAAgcAQAKJBsYJlwHsJBLyOPMQj\nV0yleRPAXzWVv7r4cryjBjKM+91WdKGje8wpU7LuHyaELMJx8yMqQYIGpZRl\ndnqRZSMDNdCseLz9xrsYGLhC/jKwuiVCtNr3CYcG1AJyEMEKm+Di93bQ1Em2\nQPPqZy3yIClLwboMJAZ3YgREWTNlxtB8gsWy+mDY1GN7Zbzflk/pGSJViNgC\nCw0Mz4QJ8XZOwYsp/AZy9ed0z9/qnH6x9ifkqVWR0ziwBAT3cWYIAiObgMZu\nNHwMk7bzhHQrBwurqQmMKtzY3Ze6iFKfMpVGOar3ohEj90yj9fLxIz52c0qs\nIk1I811SLgS3H7yLtqzJ46Qt9Q98+LC777xeI32i0QHF5vFTPumUllXcNg8h\nAgKGP30D4bRBV4DeJorgswolmyEDwLs0rS6Fmzq3ZhP10rsgElbzy0wpwx/4\ngDD18WClrv4peRDu+oVR7YFA9ZEpoW9Wkz9EBa6grZ8xSZezj+X/eEwhWcT0\nEq7W1NhK9u7AsKqRA5dWIjm9sI795p0y+t5wzIyXHBMuvLFw4I4cyE5cwB83\nERklGes4VdEbfOpiyjH2bXvWJs6S5xYceu7atEt5hR+xsTdJqIVN6fW12qqm\nMBmhnspobtYxNN9Fkm49faKdvl0Z4OFQM5RJfm1CrZDA03u2vYIBjk/xIfHp\nHjgK\r\n=8oIS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2+f86ao1tb1oC63iszQ6+YfLLrIdFsfh2s/JnXKc66gIgafycGh11GkI78+pgJLaEdc/DY+mxLJbtzW04rbzsi4M="}]},"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-fixed_0.19.0-canary.b102a3c8.0_1600114420198_0.03154900553060025"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.a7fbc707.0","@material/top-app-bar":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gd+JrDsGDFe4HeXKPVdWUWZUBJ/CpxcSC/eH/bYaCWubunyOjmZKPokjVHD7Hqktf89SrsgpsdxL3hhkEYATfg==","shasum":"e95405a54dd6f7f5ce6cded4a07ea6651e84bf24","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.a7fbc707.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOZsCRA9TVsSAnZWagAAEPoQAJ3+pPTorpxAfa7zDmms\nsMTfs2MMAL/7YWj/LVDfKwueY3ks5uzO9KNUSyA56WBBh232oejG9jPW9/bi\nZ7rt18iiTY8bqlKEnyiFJloGmZ4M0+1cau4AXUFTyosEox0L5rMT0Z8gvrro\n4ekhr7NV2lzqY17fESsXedXnujlrnvps8wehFUAEYz7EBMxEHP8bL1/3GOMk\njC5HkQuktksOpbAzYBmqElJi0Mw7HheSywKpsYzXdjf1I71oPt613ioNMsVT\n+2MONzidHOLGcxMYZxa/xFfqa8FjroOuc+X71GShuhxxxWm9TtoBHUTU27Lm\nAaD5CGYv3Uy5j7e3OIbqkxPr3QhxX91ngzokUjWlemfEW1ItYwnbk+/0V8c4\nWt0aGHunup/8h3MPzpEMMV0xLgG24RXm3cBjmtDPXwJjHBOlMBKHXIVAnVns\ntH8yncic6ehVvQwHO28wvUjmvXNwn6vUKA/Hb2rE+C+zfxMbZhtSL6nBuIo8\ndPrv4Pv8kt8lXMMRwyoYY03F7q0XSibYjZFI3LlmCMQbiccOMFmsPf+wAjKg\nyWd03c/ctld/slm4Gw+bLCospBxxLNviViLcdhpxHrSPq4fthVwr8wyXUOZV\nTPipo6zvXfl4e0S0EzW79Mcc/NsnZVr/C1I454UDjWVoK+C9PqNFaOfd6+5s\nygdL\r\n=gXXH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDyHiVAMy1pLMlQRwVnuTiKjBFM1mpx0ynTscJLSoOWjAiACmANrR/U2na7fNV8widiuBeLt1W9N6w4ME6pmhq8rkw=="}]},"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-fixed_0.19.0-canary.a7fbc707.0_1600185964093_0.256909134199937"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.ed6b8660.0","@material/top-app-bar":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3SUOOVVQHzVKaO9w0VyXEeuX/wzEdDthbHYWIpLk2R09ueWrpZFnqlNCzrYI2QVBlXPmr+LJLabWMeKdAo6fDQ==","shasum":"2af868630fad8e057c15168255c412d59d48b336","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.ed6b8660.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPj5CRA9TVsSAnZWagAACXMP/0FtSwLtgTQB0mkJn7nw\nC9THTIxgS5N3iZ9TO65XnV4xs/nCHWPSrG1bhVMqV3t7L1rx8vWJsfGMPEqZ\nrykkw9MWpQOK6haLgZXkypQkml5ydYR43CpqkO2FzId+WFG9xh8V7EMEsU0I\nPXpdxKq4YDMwBKHXL+MUHB48/A40rUlQ0pxF+D6/k6DsiJuqWCFb/po0/XVK\nid/xqrFCOkiNaMEy9g9e3946H1K1a1BUm38DcMqzzchFursaYrhB25yX+mPe\nBlfKyNC96U8C0hP26mOVxQBMIXy0A0VdkWajBt3gXi86mcu/6PeY5KMm99hk\nv3JVU7OlVx+wDciMlbKQopoi04tvc+mA1VQ7koAtTkkZ11TCa06dwCzeP/R5\nOnH1HKogptrrZuOpXxwzIt6IWQcanfS3/AXNaWZSfgqU2dDKZL0xtFL9OgCn\n4r86OEbeCks4MQuyskCdX1n3rfcCQs4UWqsmSJQ44wZONu6P7t6CCiKwD1dL\nTDWRl2gP4u+ZKX/DWHNZ1MtGt9I2VH26m2+E9hTcmdO2yT49zqaAfoAz2/pc\nQKZJ9DGFQIZnaeukLrycXut/eCMtqeBnzH+0g0evq7+mDoemkO0zqvgAMu6R\nH3qGT5+NKC6LtdemUcWWczVNmuhGL06fixV8MY7gRi9sMqvWqd+2gjjRhpIr\nJSbe\r\n=LIzx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLKNHkqvO2FfGrxGSsG4mlNLUddu08YKVZzZklVwHYtwIhAMyqygJF8elSlJQHn92fgLDnBt60QaZ4mTTrJoKdvcUr"}]},"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-fixed_0.19.0-canary.ed6b8660.0_1600190713384_0.5304474466493252"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.9c2331f5.0","@material/top-app-bar":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-AE5OZhk0D6AivtOcV5EJkjPOzZ+T8WyXtDbm0e3VK0DTjGummxhgZMiNfEkr6NFpnTzDbGHoJmhE8beIJymMlw==","shasum":"016b0087fd27322797d67652778b0381f67e82b0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.9c2331f5.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP62CRA9TVsSAnZWagAAjY0P/3kKH4k6dwF06lZ3oUQT\nh59waOZhlQ9gpgIQoewdbd7xQ7lYCklugDVq6kQJSSPNq0+R1uDYGi88Isxz\ncO9ZSQTd0szTJSO8Vi1x8qRsl9nx5da7z84we625m1C1a1ORQ/P4ZOyhmb3l\nzmvlBmUEUoE8gibUBhhu5DvQm7iUAW1GvgQxyMmzd+k4jpDBZjdEaBL1nbQF\n8l2FyBJk/ULBbky9cYFYEFVeKS4++KGd7MdrIhAWP6OgsuPfEC6W7o70PvWP\nnXVjMX12wCm8D1lba0q32oSm3/GByolEHb1QpMFFUcvshSyhVY3VjxrPZtFh\nv2SMoVIMQYSGVx2czd3IdKv3UuOLd822NS8jnD8b5INQ/ycUW4TiNPasP9Wh\nXRB7Wd2lRFshMclHx3nAzd5bV2YJC/CQh6xnbZY1QgV3NnTo/tjHz9QP7E0K\naz8PPtiXJ2cukmjv8JZaQbOOK9sNXpanAS1yQGezeWy1t9nODA8iy//ZUkU7\nxgzhfSg/x85GP53UjxseDIdLD7HWJMX0d8/8jLvhc57dtGbg+Pc4eDQkLyif\ndroslM3D1pcoF+BSdhu2NZ+ejGbpf/mRuGbKcej8sgrtbS3m8lNH/YVCKr0d\nbIN99zUvzVjNg7j/g2DQKnvaLw5LJCa/CxZlo7iaffS2TgTujA+O3IqB3umm\n2vuo\r\n=n50Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDilUETi0/w3PvhYLCxhqix+ogG2boF0H3BKF30veuc2gIhALGO/qjFWxSonDsfHpnOR7YCY1dZNIaGw991SxGUa1Df"}]},"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-fixed_0.19.0-canary.9c2331f5.0_1600192181821_0.3483177310892054"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.63a5f088.0","@material/top-app-bar":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3XriEzNLhPzT5iK3GJaWN17hyvBKWi14aPBCq5h5f8ncvOXArAiKvjb96Fw6F7ZDBp+WLf87rUlrQXhIf9WL8w==","shasum":"f7e10d261c4d7c83c9226adc170dd71bd7de22f1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.63a5f088.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoXKCRA9TVsSAnZWagAAT/MP/1ttVOTBxjqJFsvvFOPJ\nGo5v4hbQsRexfB/Nm8COZzuGj/dCQKQ3BveSKdsyOvbN2WXs0lBhLZuMEB0t\nn3OAs9GxdAVxKZewGdr1z+raYk0uj3DuhiROSCflGvyBdhdkz+sOauwXUUNI\nwVqMBR/32ifJvUqdJ4tnZ4GwO8KKM1rdIe1n0HmVe6FAkprM6I7zEHdKXER6\nLNrCcF75t3wrhN1DlR7BImpkWCEFMRo9I/BH+lLY5EaovV/1t8W+2P927yHj\nCacVqUPBZwG5GDh2uqbZ50XBNYtTm2cM/xIfKDIbPUz0+GuAI6/9Cj7E8/gF\nBAPHXxVLcrSZ5CgIvbqMPscmGq0b3tCUbaNAo/xF4KCk7L53CmHlIZGqIwGe\nR8xzgG71cCn/VfrGfEPFO7NuBq8maFfYuf8qE89s0EC5VsT/6x7LTPY7QhYX\nBlcMJXoUTMk3cbohp55NOAm5e8xBjYcm14t8eR97wg/3m9uu8Hxc7DG0s0U7\nl05YI+xSRfPlBroBezoPKE/iibf58NCEVTotLWAr6ZknGZBlTp9L+xgwSdpu\n9D9hAlCUp+EP0kqpCubwIdY6WZctHWs8Cneau6AJdNGgySRnN5Fkq9cK5j04\n1xkxeoCvYe32vwWxNNVbNIDBau9B0TSiD0HUlQi+H4WmTp5Z4zuuWeUDOwk+\nCclB\r\n=3tI4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIATriTKm7V6dWs8l/y99NKXUqx1iaEAj0vdtkhHeYpNmAiEA9aBYyZOUAzmZe0Zccmhp7i2xeQFu4TBbENjKDiLFmM8="}]},"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-fixed_0.19.0-canary.63a5f088.0_1600292298385_0.8528521763664476"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.b7995e49.0","@material/top-app-bar":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-KxW4T5l6ijBs6hkhWSukRX5nzl+dAUWO0ZhhW7aE0P4+HaBSYWhU0jZsyDoYtXVUrOqQVgLs6m/yP7MAVWolAg==","shasum":"149f4d5bb55d3ee0fd7195dc36dc858fbdadd720","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.b7995e49.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp8+CRA9TVsSAnZWagAAp8sP/0j8HasaoCMfLeFUcivC\ndE235kUBh+Jg6V8Wi6fBKS18TmvF3pW9BoDlRAo9vjkA5uRPB38PW96Knqt2\nIsjFH+GKC1vIkjpo6EDKu10zj9+9YAUtvNWFlOLjM/ip2ALmQaeoKieQSjpg\nHd3ThEFbcaWaXuiQWX4RWgfbgj1jJ1AsV5YSqfY7Sd7VuTNrjmZYAdgROlhd\ndJOLqYGx/Lv2uxdLj2GTMbijBcD1vvtxr4QdPF3Ue0jMRcGHDWk25GIhH2gx\nCjj54hLaepz980ith9Egb5FQvEdX1SgwQ8z2L0UK/1E9fBFlWAcxIMmTb2Kg\nkijfOxu+mKV4ce3OPKGEBv9m440MhwT/Jfw+wEYQb3eAIXj13IG+aQsY35Ho\n8SEBmgMW16SJMwKebwqK+iykypMXmgEE2i9tdKY4ohZF7iUcGOrZ8D0ua7nd\n9VH3leKDl4IGF3rR0mxWaRK5kprsgILOJEUxLpUGrfYC2F5zZWQJTBBuGoj3\nNUwMsEhRQsstHbYpyCqAQl9ZYv9Iefj6KP3csXlIaYxhixpes8faOSgOag9R\nYo2YMFqOsrllJtEOiI5KbKaaUSnRXooEu21WV/RXJRhwDtWIoQeTa7jHaH+F\n3IvSteQi/O3TseUQ1Etiy7lGNW1fWif4e2buKvfKH9H3qadUiiLDpfTHfouB\nFg4U\r\n=pvUO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD0zkDbYyrKCFjKYZlu26BfdaQNJk7gDJGRAWng3BSvIQIhALrdTZBe+HqpiAus0QpXoj3cebT5vYREPNrrVgp8t1DZ"}]},"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-fixed_0.19.0-canary.b7995e49.0_1600298813917_0.896997256567835"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.0da3ec97.0","@material/top-app-bar":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-du/0kT2q//v+k+9k3cjKllOnoQsMbMqvujm0GoTGh6laidC4Mp5cLqrG72JCBrIRbeYX1YoHsBBC5N+x+9pikg==","shasum":"8a040c408d446cebf53a08afe5346847bbe04cc0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.0da3ec97.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSR+CRA9TVsSAnZWagAARVEP/0vCj3lrtfcoFMXEtpl7\n9rcdE8VBfgzGg2lQPv5vqRhZBcVy4E0XwoHsFTot6WYaZ9sI5C/1JFu4EkCm\nVSLqTJOo5JuHIrVkqP1YFgntqd0g65OJqeFt3gA5qqErL1Eo1lI51eIhW4UB\n4kOSVBmzVib/xQwQ5/g/Z4ojKMXebxaC31ssnuJMQjqpQ9/OzaRkWSaMr8zM\nqQqoyEOcxAkJPqujbTewhpuwlVR2CDDGMbQIb10dgp3UtNq3FGnyH07FVnpl\nikEN38pkIQqrekWqYoluoYxtrTmLL0+ouK1GKRJMMHxa4njpo877Dayv+PSB\nCyv864F6sTi085niDF9gTEGasuC58vQk15M3FbV0HaV6ib9kJIwxQUucOSRB\nV50gbTP4TilqRQj8Wmglw/quN3CxaA2TD5+5pQgMIax2FHYxIYywcQcFIiQ4\nFI5gn2+l9EXEtyPA6P7+PDqiIHR5RfuGH/DFEaIa1NOMj4/jKT7mNw1Fr+xZ\nOMWaqxvHXjJy9o28F1B/C0GwdXssX9C3Q8vHujJKckLSVbBC6bt23bQ/DkZp\nJuf0cf0D0bC6B2gryp9L02OjArH5QqIwzdCSVKZJYrdp2qvEAt+VkKuDtN6f\n0eCAzUuRQU6vPWdQQuYZHQ5SPqKq6XLIIqAwOUQpiQJe/iHDAltZRvZdxrab\nhtDf\r\n=0H3E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClMJ6zrimvGolmA59fXyWGWf6rIf3AiEKijGbs8F3WVQIgPoxnLYoj+LeWcXLi5caGTBewjPnT0yBZlYpPuFf65WQ="}]},"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-fixed_0.19.0-canary.0da3ec97.0_1600726141761_0.7698702153657861"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.a0793c96.0","@material/top-app-bar":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-FTg5erf39jnSU1HncGUgJ8hGgj5+rzfR1l56thk6bVumpH9c3rkdx0yfkVqsmKj4/alC+8pmcKLS2+9qvkfCpw==","shasum":"61db7d35124a06d9eab10219553225d519b911ac","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.a0793c96.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai60CRA9TVsSAnZWagAAcVkP/2P3VilL/DOF0j91D/t2\nAyGe5ubAqXJ3sSns66Z+2AmqnR07T/UVWiVL9n2PFXtt8btBGY7lCGNt2scM\nmvgZDWYC72iBQiMRkwwYO4VJiWlOn2v3PPN1+QJtSF8khcd+oTwKW9eTVO5w\nf3RNl4ZGP9/IH3ef4l2O8ls9E545E8eFVVzRFBEoeFN5aOSSuHPDtR4Ybqe1\nuBwb2kvnd0BcqoZx0YWClA1g3zoT6zrl3edEycJkXUhP+QHzNQkf6Sjndawo\nC4apjx2/taZ/WgvsituBX/yUpwtTdSU56ARbrnVVOOmtu5XkC+jkkGaEdkMf\n1kg10HZE518334qPhM0B12n5FIdja3G9LCiYMpbzqEUc58RlJyletC6EZkqp\nIM0aDM3G2qDiQc075qmBRn64q6X60Mrr+fXiSl4Z/gKSwTozdzboXS5c3bYZ\nyBu2ReiL69HyEl65olIzSYI8wS0fzDQAqlSHWQ3Wfmji12MR4EwEwEMmQuq3\nEYfbq9KumxG148jOg6AyHUk8ZV7qA9uTEEFyKBcEwsNqsJQHAvqR0fql9OoD\nF1JgneM1x7L5+nIuTmmOOKAI6YLnPz+lp2OCpuMfCxH/oQRcn23mq8ZbYQ8d\ns+iplZ/l8JkYNpYdML+ZB4vL4BHdFTQVbVgZz1XmBiPS5QaXTVTJIyuEcJ+b\nJr+r\r\n=3VZ3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDFWhDdoM68VH2JKwt2m539AOhXqpirIrRwgf9GhdHxgAIgaHWkzHIFnsUo3e9/ALXan8EYkFYfKev43GTifZe4AiQ="}]},"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-fixed_0.19.0-canary.a0793c96.0_1600794292140_0.24712084261745004"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.06998a3e.0","@material/top-app-bar":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hCFCCb7J5tRby3eiB7GkGNXGI5h08N51bFfqrH1RY2XmDpRznV8qbd/7trgfZMOHI2xaN/43in5ClTq4nrMv8w==","shasum":"1e9d47f50d4fdfcdfe4144efae61b9085a11f862","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.06998a3e.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakHACRA9TVsSAnZWagAAxY0QAIzeczcC9CtVj4+3oqq7\nUWByzFlgH68WZteKmbqxzaiqfYG+5vVP7rPi0BJStA50v8s/yEDbBbaqsZ+t\nSxANM3uRKVl7r7WLY8noptbt5CoYl+zdIZmy9z78m226hs67LKWT0XIVE6xP\nOXyfY5Dgf5IzXz6WWUky1KA7opDCKLd30mGkvBbzGpVmsl9Pme/TK4xI582F\nCKH+wERNdV2qFtyMLYjYpjv4Jn/mbbNvlpjxXRMNYOUhPaRrQBJeOGPx3hVe\n2wVnfk/z/saQbwdOpnXz8CQAPdTTn86Jj4gp6B+NR/oXCLHjVrZ+PWRxyrzf\nlhfEpNavgmCRc6BDIZMmAfcsSkiL6Kli/ZMm2Kv8r/Ao2lsZ+jr3tXLT2BB1\nvYfCkfu5dOMPKyrLrWAb1q3Xz6sFr0q2NWqFelo5l0YXNAh+v0ajL2fAekL+\nEBJ1GQ6o3gxhpJsEPtysz4xwC+bBWC4yolil+MywYR4fgQWtmePtP9YF5W2V\nM+YB6BgORsIXHfWZ6BCRXjOvf8QRMl2QO5j13l254iH1JyJjUE6G6g6NW+Yn\nTWsPvxqk+/CiYgxKxkTRXchCHt/XAlXIdbcpqQevllPsiwgaOv4Pr8mDIcrD\nkxtLoArDNBeE2UWYDpHDEENkwHE0n9NNFZOmM5ZpNP8nGIx+Ug49vGbbsbmF\n0IVr\r\n=KOq3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAyqYl3C23nepy6/hjqNW2CxkFUGY8Ng856p+xepd/8aAiAY4mmwN/8ua+9kH3QYtEH/33Ae3WDCesLlrOOwfo5C7A=="}]},"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-fixed_0.19.0-canary.06998a3e.0_1600799168274_0.16815907561960164"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.3484a90d.0","@material/top-app-bar":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-R15apkEQCdNjOy8NSCCtTWUp5zlzXFAzHUQrR/NdHYTBqr1a1+ZCWsR1jkDzu1N/2cyT98KZv3aEaIbNMzO7kA==","shasum":"5fa9cf6aa24e507b01cd74605e0ef9de8abd6862","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.3484a90d.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanTsCRA9TVsSAnZWagAAMAoP/A6B93TKJV1krNzEQ+5f\nx/Uiktp7b7LBCaMohGDTrR1iud0iWw5tWXekF1g7EhXNKiKDl3MT1zhK1U4o\neTBf2KsQl3uLobkHxW4/FTpNhb1OplmefYlwdE2hHSXRZbaV/Tlt7Vsv5HHP\nw0FE2+gpNvgThFqdoVSIFMf0rfpP8//ny7LRx5I1doKpGdW3CfoAOXC+qllS\nbUSoxR9OpzVaACmp2nkcdBoIrLQBtBErAsGeTcplVTwAaCoTWrqYQmqg4uxO\ns3/btB1mTKmkuD9uPW1uX0RpPvNuMCUe2+teUAqBO3xV28OOFQ8uph0ytoC/\ng7JC4qs7AqGtaIIrKwepevOXL2HLSAgV2ipMsplFZd/4sRSgcjVXAx5Cch3e\nNYr+nKweGsL72yTafl/H5wgQdXHUm4irbFSLnGRjUBW66SRQ4VfBrQnt7iia\nyEqD8BnE6rjM72kTY0ETLdE/5dJrp9kUSnaJ8kjZcoC26dlUkM5mkn6rkoz6\nk2+v+ckpBQqmgdJYvehGZhWsbYnkTZMILP3f8MGJUO8PkVqn98vZZhFPqweN\nLxvelM6K4Y3DusgQeajf4vtjQnUWLlxd+JLtFpbiqXAIWvwaW8KgMkLlrhM3\nS0rHdewfTWMkduCvVkjgwVdalUINjhjMyKfE00Qmn/VsWdR856F23DFhHMaP\nvBGC\r\n=WPmM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGXJO4AdgrgZgo9A9ey+MCOIOUEFbuQrRMcnYZLj85MnAiAFklpOymPH4xrdk4Oyw+MN16t189aIfpGJ3tJXu2YvLw=="}]},"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-fixed_0.19.0-canary.3484a90d.0_1600812268507_0.12652504642940499"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.3f99af40.0","@material/top-app-bar":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-LEoO/FKv0KJF4dmnaUcpWpPXjd7eLeEbKUEjWvXVJMXpI3SOw70zP9EzvYY87TiW0YPnf6X+6ywNzalL/KLhXA==","shasum":"a587711118da107e9f290d795a3cba9c8a683a91","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.3f99af40.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSoNCRA9TVsSAnZWagAAj4wP/1cI15oXQgtWM00GfROW\ngxzfK4eJswopF7WmmKuZsg2P94jiGXZI3XB5MLk6u3L41JQSzGbAcRDUOxMz\nh6dfMb71aR4FLF0uhYHQEUV0kMdcRqVf/I2DV8BzJAynby9xdoSqNqebrVCd\n8bQpKoi4t2bJNA52tnZvzeG7Ae7L83yvs79CHqVJqBtALxV9mGEplmm4GYrZ\nKaSb8UkU0a/d1umPdLGLPvKCH7BjeUj5m2X/0iKGMDJIp6VIwgjLq1zKuluS\nXhYnIfBMDJ6GNKjOfQJu8uN1zjHz8YDmaD/BozDT6vlbVZ/GUfbAHjfCDWXN\nEZBQGHZMXlsZlm7rxaAQjhrENn10Td2qzr2fIl8er5UNFkhDvYpC9EiS8o4a\nonEbyK9zhQEKoKBoMGQSayI8wAmn8GOirN29rEGTJYR+xUPsrUBha93O4Z3s\nr+CiwcppSN15dq0QEaICdVehwzcy4pYZijZLVC++LjaUYnaI+G3Ibxb5YE3q\nTpUj5BCU7kM2VUHlpcrvYzj+HtoTqohEswTywrz1sTdYyBj7vlH4W3S2xc7W\nMCzMP6MB3HZQ/MvwyEEGYR/SjcWKlQBxN/9IS0I8ho4k/Q9h9K3uUAvxU1WF\ntoCyUm2EixJEjqTBxHveW8z7FKtoRKr5O2IxTjiQlh7Ok52RCTVKbeoX9PoA\ngITz\r\n=wL/V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3yDjuXOWR+Yoe7csC7KdAKx1agm637461XbqpXFkRpgIhAO50vRTlmCSr+nOYmXFt5fZJnnZLunM1DSDBMIohmxKh"}]},"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-fixed_0.19.0-canary.3f99af40.0_1600989709201_0.5425323205925492"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.72aa1129.0","@material/top-app-bar":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-pZcAca88tqiN9Dsqo6DDE6X+58o5LTG2XjlE9kw81FuWwGSCyGwwmxAMbQmfMn/ktJu0s4PZ/h3GWgRxUsyWrQ==","shasum":"5ec2290132fb25bcd50d8b78fca6acd53e269f08","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.72aa1129.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblwcCRA9TVsSAnZWagAAbD8QAKMPPTNiiZ8XelJzJsk5\nrJN777q2Nob7//55Qquz/wqa3Uj/SrYaPuB8q7/rQaGEElRT7BIjkjU1+SkI\nHeFmszEZvYezv1JFM+rE8v2EZmSwwQBXuzoz0Y/6Vc3RVandTQGMtWjy+TJE\nRvnLRFyhQieW9pBW+feLQQm5y7gytZXxHXBe5nfIjiY5GqiubPxNsSMaJMvO\nWbPnHORf3RS98o6rriApYtuemnTesETcAQKidogiaoDINYxsF0eUgR2JpI8+\nz8WDmnG+ScO0pFiephevzxrQv8e9LzHqrp4X++bYloLv8WWdc29mHmMkedHP\nAqjg2nc9TkZvBZD5cu0D1wC9xvM98DdUBZs7qqIRmy0AZS/qZJdAlFVDahn5\nMhocNU98lSQft38YnOw3SbdUBZYjq70dVtjgJDqSTymtLd+aHdpoEr8JUEFF\nhEdH7/p+TiGTyrjFSTIqgJD5Fh5C0bfU+lJT2PJAF0bt29StcIbUGJ4X3ekQ\nis5zkuRh080l7IH5oVqKWEOZBFE8LIaPT9cibd3Dwa/F/9MnhIk/qwiGg072\nHzpHgebDELwTrcLvqRbDAaPJbfNV61Aq31O+dN4oJfj+HF+RtEksBw2Nwpg8\nf7vJ8yOCEcY/V8j88a0sNEKaFrAPIeDw5NePQIfcvnO9EGOu9z577LXLh/MX\ngBCB\r\n=YTof\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG2xv4fB8LRisKr9W2qfnVgygPNql/dy0UDFa4fK0tWdAiEAyqyNvT3EA9jKB44cSHcp04V5yRo8ILe9W4EcNAziTYo="}]},"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-fixed_0.19.0-canary.72aa1129.0_1601068060549_0.746282857388691"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.394fd3f6.0","@material/top-app-bar":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-/42ZqjgtH+NXPjm1TJc0RVBwbbqx3u3QGnROjiEjDGankvXh3nRPPDv09yN4E3Ulql4K/SGArCTZZX7+HWR9Sw==","shasum":"4dcf39437daf0cb24cd1cd676fdcab1b583257ae","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.394fd3f6.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce9lCRA9TVsSAnZWagAAcLgQAJR8KpaERUhM2+S4nnOu\nITCB8hoPMO3hxDR8DwUM6yTkwI36C7RDb7+grAiIgjoaBTWJ0mXCWZFNaZ0R\ncC1rXNRSaFnJsarhw6Zs2lE3VbOLfFWGLgJq5Huex78RGJEtk/dpT5sXIxeo\nJs6zYtx/i+cyUb80gUSFcwA1FC/E0Vv7Shw9NiuhGlidhEqfybg0u/B7aYjg\nCBwKhR+zAZ9i6+Tbf7kHt0t4s5TbYwSyDiaXHLJqd8QF4QO8f6XEEUlO6PEY\nbjTd/X++rGwPFJvNhYripISsdlInkiLJhyLHBv9MPpYj5w/8Hv8v/Aq7qzxM\nTelxjKsdOQt4SZko4kCdfarc7A1yP0f7yqKCnMJiRcMHW8xmR1ga2EXpClpE\nW/qExOE5sxW1zbhzyrpYpzA6JXIldX/JHqoZRMADKha50FuGdtRwYMiT+Gkp\n1n7YRE7gvXn82wfvQMWqgjxnU1HHSbCk5piUmuYpLHTSmOj4ErP4cqMxKDnA\nbFnJrIjcFLg96yZROP/orFD2gGWenhUF1v6LSt5I8j77kvR3jqyj3uOWVsE+\nyMjHYuCh6ZaVu5jdSNJc4M7kqFDxvDFcE720vt/lfXwCwzEXOAGi7QPsRAjU\nwR4BTKtlUWLKZscTycLu91LzVecako6DYtPdJN4NyFvg/lFBm6kF7YAL++98\n3fMf\r\n=A9Ou\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH97Kxi69YTqGb6X04RS4EM0DYp+129lWoIdoX6WB/0yAiAe7CP4+k4Hpjx7g5WpVaJhc+p3kyuoLyQaoQ9kMZCWBw=="}]},"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-fixed_0.19.0-canary.394fd3f6.0_1601302373397_0.934522454613181"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.347110f1.0","@material/top-app-bar":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Ft+xkebgTJqui1ohEbrXEVeGsHoRQ+WQSvPGOYLJUFNeIx3mEd75HBhQ+0E7OjMSivtSJ5oWUSb3r5jUl3HnQA==","shasum":"a223c3012af2a2265b9bcbf42ead50a5e4f1c020","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.347110f1.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchRiCRA9TVsSAnZWagAAC2sQAJ1oc4vnKIAB2VuBKlEL\nGm5a7uSx5koUhM5WUq7mmxBIzPmVSOh634MJOJi89gveboQhod++sLY9PL6h\n2pS0wsD3CQHxvtlCIJpYCSZS2aMZ1KeJa9p4+JSTaV25O8hHnfsjw2H3oS8K\nTqzFtVTK7RsSDOag7nNtErlOnCiuYkDGJl2bwZAmOBVcDgyJNqS3w65AvGpd\nh4HOWZqEPAIMK4gAXC0WLa3g8A4ic4KgJ5TxiR9pNPpfpmy3TwO48e1pvfO7\nYABgX9kltfY9GEz+HVbwVyIbFUuvDV6PZlCP+ZwoNMddad0wI9RY4fXlRSRV\nSySUnO0ZSV3Tm/8N4Tjprh4SlYSdNm61Nme7PKGL49tOCmMbhcnY/gyyro7S\nNvVAsgesZqiBuK7jzxIbLirIPYF/rh4m8irfOx9Jqs0LZEo+kPMMWTHD2xo/\nbimDh2yCnS8wKQmZe0LAY2+yKkqD8rpivTNbfdlMjJdTxwX39tZXihMlJdK7\nt32GcllirSK7oV9T0gtP49/cpVxJZXt7GpZNqIvOTJvL3jp6tJ5MTEOq03QG\nBzMacgTo+JYyEvBgkHyc0XG8H4S7O1sirxRXvm7W22yMJgZHJCMckHz/q8Cs\nTgNblBs04AcE5wme0ozFIP5+iBV65Y8a+K3RW/vDjWF9SwoYOwT/4I+fM2lJ\nkFNz\r\n=1civ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC37t2xDB/YzUmJsYvN13nBD1cuOerqvZ2kB2SLD+wDTwIgSlR2ZSshK+BBTi37Hjdgv/rg+Vkzqt5RCs6PS8UVGaM="}]},"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-fixed_0.19.0-canary.347110f1.0_1601311842326_0.5824404939811434"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.5e330bb9.0","@material/top-app-bar":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-QZ3iZLJEt2Xqh3K6TSuLt4CLPOY3LF88CrBxL7fifv+zN2B6Nrwby/lBsK5ZXArhFVuOZl/CRipm/eLqAepEIA==","shasum":"77cbc1b0d350d9d05b9dc660a6fe4daf59302a1e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.5e330bb9.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQA9CRA9TVsSAnZWagAADk0P/REsmTJornD7pb8ojSWA\nrkNOJRMbOx02/fURtb4ChTl5YQRFPZgBiAfC5vob4o9SPYBaqdZjl5zJPaNT\n2xxWOIAyrhRhxnVy4JQFulICfFgTYtE3JogrtuqQOZaFZk8R2wEGGeM9xx5k\nV8mwHSmWd1Pfks3gzTU2XMCh9AFEp6bpIQHrB94QArATCMdlWcH3c+E/WASx\ni9GBTFQVdCezITHljl/ioHvd8NxzeHv53WKFjkPrv+yvzYb6uWqo5msqzr04\nVsV/+SI9BU7Y0bmp1LnQAj6z+OaRFbrCOTXU9eXzdzf+Ov4gvFPwEuSeRKRb\nHBGjqmJZVDZU1IHPhDXqWgbGA0LsH+hJ/jskEfXghHIxXOzKXzIJj5Vdut2c\n7BRoZYlTeRPfNCI7RD33oODcyEkXmMUFOr+p/EI3tEdzIxBIKaLWxwWD8wkb\nUbjtA4cuyglmoc+6elzlZjgTVV4TkbaisKmZWjaQSx1Bwvj0gIntyHvGOJ3J\nCtOB/G+kjbDEQrz4yh9TjT7tXS6qPjJ7vyoULC+d6w37GtEwlBTYCPg74ztE\nnQbekA+HzX9s2I9TbeyrbB4d60iGHKdY1rUks0RL/wQwrKzGhSQpC67kvjZt\n/AMFwoEAzearB6n3DCvVIi+Z0Rt9pKLWnYqcBECJ0qRd/99iPh2JHVWEC6MS\nvRSc\r\n=jeL8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7mVEAHFLnCJttSih9nJqRMcVMTrdX3eWaUpwg9kmEkAIgF/tMDEsMzUHChmh3clijPAuQ7gDj3qPFGAn/optzf7A="}]},"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-fixed_0.19.0-canary.5e330bb9.0_1601503292748_0.2162296114628468"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.30b9e3a9.0","@material/top-app-bar":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-nf7bPIxRyRPNOu/NZldqWpChSEEtkzL7csAshPvs4HvFyi9RpNbC3Ky7TSl3c8s7l2UE0SV5XtbO8IcYoJI9iA==","shasum":"9ed84123297f58cd6b23130167cf14562e166e89","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.30b9e3a9.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQjqCRA9TVsSAnZWagAAG10QAKGXE+Ra0RNzTm/oWIs9\nnA3KpjzGHVEUbtYRnN3fsmFtpJxyQJjuGQz3CXEbvPDAPBkzQOOtUH5P1mw/\nE0vbSU4cpKWEJAYAXujQ6/KqX0TeaH5gGg49rYi5F0speYg00xpxOQlXDOCf\n2wfHXFFLq791GAEfnGKviy9MBybRNYMdo1jRETZGHPdhvltuUXfyovqmeZ8R\n39EgVY74QTNgVCq8wn8lEzQFsWpWJtx55C/DqJKq8R/6I92fT5tjYUL/ITbi\nWGy8QnG7N43qa86hPKnNUWJSOrmBCrnloq9RJNL+z+e2zVP2OpgU5JqvhOQX\nYyoxEkRGchwRZQnQW0qBSQRptt3qODBVzaIg1NypFm4L43Oy2IY4Vmk3NMN8\nCOcmv5amp6UBItgK1+CmmNHG+XyB7jnflsPCJ/kYb86sFa/H3vSeI+3Fn6Xa\n/5p8q0IXGsVGFcqJ70h/Yn9lD6hnUA8n4tDt5ES2SHMhr5Cak7va3tNKRRx+\nlw888X6rM978dKeBNemnji1eGusHR/hm+2A9PDCMUUcwdXeHkFMRDbXWuOze\nbkIPjHzhd58if2yTNaikfy6JGTtsMfdwC9tE390kZkU9AjibVgbRDtMNt6rq\nCh8EO5UxMkTdTBYR2qYzRqV3/wnpQJPaW88O9RoqPfOh2dW7dPM0Ve9bLfIl\nI8c3\r\n=tJFb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxPctq4kfn+aiJxL/NA3eRWj7YVWf9Y5algSuJUPNsgQIgA6qKFD3L6r9zcxbl21MzKZRa93NBjsdr6mDgJFp/c0o="}]},"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-fixed_0.19.0-canary.30b9e3a9.0_1601505513924_0.8958554932177532"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.7bb04b9a.0","@material/top-app-bar":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Gbr6jZ6iQd7dmlfrySng6PmhdXhcrQJptmo55802bzsNLhnNebJOIWdbWqsALnek/Rz4PGjIoNZBrhhVIdlZKw==","shasum":"bbacca2d916652cbd7cda79867e4174f3b4d69d0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.7bb04b9a.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmTsCRA9TVsSAnZWagAArA0QAKDDx+qh+QohHQIrkTNs\ntarPoXfA9VIkGV4XSQaGMpKXVaRwMKFbQVb8L5u1A3grphj2sYzlhYT3jQES\n8ndOZozxugXAe/QeTPJ/KacXEsiNC9D68ETB7ySZe4b1sJdYq0OaZSNZkvtH\n4JETikLq0EvoXfWDg78W/PB8vd18rfuYUkX15mDAR2Dw0ytq8969fG+5M0iI\n2ypEehXmDo2VguyF1tI1s026fGFaL78qeuYFElatqjej/64nbp6g1Xiw8emV\nMoFZv+QdWbldx7OqMtLhWXkahpxtlQuDQvSAeU008qq73ZvLETP7DovUM3ze\nxdTAk80k82MonGYQ1qF7/8kzbPrjByN/L7zRbnHtrccd6RmZJrwz/zY9W8jZ\nNQVXvMNiN3A2MZnBzoJPZ8WxmhvTnNeWRsW8IUDzathdFL0Wh9+zqILeKkg/\nxLFGYvxJFFa7YJFDUREdXIC6bqEBo4eq9zZu/3s6o02hZ4Up9HsM7etz3a3+\nHf/FRg330MInufjk8GYUY7wJlipOR/4UUcY9wNquq7FZC9YJ+Wq0Zi5QP8RT\nEU3YfNjSb5cxtntKOnxMV3bGuASHs+/746tSYpndUMo/2FUj10puarpf3AIz\nsNhHWthiwlvHe7+O6UhHX5fNjtHASgl/HXMCpSD1uMcDSWIBQuidYKYPcqeT\n5ThY\r\n=aHnp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0yh8M2g60ExUtPvhdBQuum6bApZ+yHa+ZNbopyTnaxQIgJ29aO4UyWglA36gPyxcwVhdyuEdfs4LuxHw9f/BjbmY="}]},"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-fixed_0.19.0-canary.7bb04b9a.0_1601594604470_0.26114720440794814"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.615d861d.0","@material/top-app-bar":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ivPwX5WCDanYLtjGJRW943PjYzxyRH0F9JBn4oBQ2Oyn8kecDacNs8Bjc2+QOKz9c1Je3DemO8X8Yuemba63lg==","shasum":"2365cb24a3c6d0972fa3a249036ce1ced0452211","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.615d861d.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoN5CRA9TVsSAnZWagAA1OEP/2jznqKlBe10NU89cV57\nrpznweB/YMcHDM8Cn5cKeQePg4naxzyxeZol81o4ydIgx0RbvlD3oGqVUcmW\nz63iFF02RbxbMKqm8vhebDSO2k34C3yFCQiMUpl6BshiSfWZsJ3m1afxovxt\n58PQUsV62nGt8sO0n8Imfi1hfJJXeRe/OLaMegn1SoHawgS6ZFLD0fSju9x+\n/qm4Dk39SdJ8Kr2OFj06lD/reQVdvqmuhem1i3Dc47n5ebKQb8U6n0a5B5jZ\nhZ9imdnXbkkY+AzUTcQ/kDapB60/rJGPYZiapVQclKtG3TgGASrU4KExQr91\nWt6TSgtcF0WmDmxaFCyzZKsWUk851VqTFRH3kt2otrwNwEVXMICvd1SNL2iz\ncscifX11ci3lNzW0K0dQ3B7xgFktK7PGFzdu4tZMerPuivohW10WoXUEOr1J\nm94O62zaPmjqqubcLNoBXKXStEz1GtNoKmExhvPf6UFTM7T5BjMRfq+Zeqp5\nnPBQX4P0nh4rYzoTM9cstvWPwo9CwMPIfxaf78OH/O0hHJVHaK36wdC/znWI\nvi7ae2RipbQT5zk3xaHhsv1MctzEtjr9uOxwwQWB6lA0EwedsUZW9ZPtJf96\nkJaLGeaMT8yB9UneUGNfFvrphRa5mUl4QaJ+0we2DvFbLGRYTNr5333lB0Zw\n0o9O\r\n=d0tW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFboGpHZSKYMSQrgb71k8zuBAe5Eq1QTNkcrim6HDHeOAiBXIyjJa8iR0kxe2pD9NIbHywmyUCo8+m6ah9z7MZnpTg=="}]},"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-fixed_0.19.0-canary.615d861d.0_1601602425292_0.9916782363032859"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.af110e86.0","@material/top-app-bar":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-l0XpHlJBZ9iQrh3bEszm4AG+jOkauvYastJ2v+gA3D3bGzwOIbxd13CRorIUvl6gE0CWKtwyCINsaWn3u6PFrg==","shasum":"ce11ce0b2c11ce123e089c5b998e6885098b6b05","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.af110e86.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7y4CRA9TVsSAnZWagAAZAIQAJDzrgaHjoEm+JjpAzuq\n3+n5s06TA/aQEmwzzXAQBEVHcT+YwFOvH15PEEB/5tov8i95YS7PEiY4KLLD\n0hfx1NmWEkZ8VgL7zVmoKL+1vnYf6ck9Tzh3naSAyEuZktHYFQSZjCImdigm\nlVPdjOtUzoTFzSRpZ/jN9XCTR08Nvgv9JkKjr5dFUQWBIU2KjrCNVIhReHNz\nWAAA5Nu+OopN4dG+FYYOJBDGsV9+1hN61mXhBKRmeB9RguCWYTlWQ2IQ4bc7\nHbp5UL7w3s47NJpTFfgKglA+vxYW9d4FMt4/dgkF0q1CTdjLVmzzROyucK7A\ne/j+kc/qRJ+4jg/PaUe5LCmUTyLPRdO3Wb/Ze26VuGtYLE836lXA2zZCnqel\n7i3nGVLlsfkA5e4igTtSe9OdD1iCGvE0CGRLjxrMbVmd1O0qmweZbg/FLriB\n9AeQ2BxpbBFAzcp+61RRXcjujWKpz1wOMp9nUKzINs1it4014Lx+GcX5EawL\ncynpidpALUf7pWqNy79FuAq8ciIpllr3pYyKu+Fr8mkeJQWn2mpj2JpNqwrF\nhzRMLoXTF6555+cIYKWaAdGMDCcbVOFx0Lwkcmqklxd3Oj93P1kO0Z180rkN\nBuTrekwcnSCMkGH1TWWNj4Vggm4BNg3XIge/1upgwo1eQmWbuzfPumHjBZLd\nSlQE\r\n=aClQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAvYtRW16Doz0DDyBrOaSSbiH9GJ07Yl7hLodKpGVW0uAiANQGkC6/v6ondrnfALQM9drjIoD6Foi7UIyxJTcJ5iNQ=="}]},"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-fixed_0.19.0-canary.af110e86.0_1601682616293_0.205747216112387"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.89d27ca5.0","@material/top-app-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-5usU/34tmTspJFbz2DpMf+cnHboFKoiie0BFkzFUMmIDbbRyNqnmwZf7sMpv6/o8OzqdXaryd3kQSE39YV8V7A==","shasum":"2719616a9a55155346b548de8a79c0ffa16700d6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.89d27ca5.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8f8CRA9TVsSAnZWagAAwvkP/14Bb09Kswukr291ksKH\nriASPiYAQv8dlCLhlb4WCvDwMjUEvgzvepR98V8O3fN2UzdVAiHRJ6ulGYdr\nqoEv+BlaBcCewmurIpIqKGlvpVKdh6j1LfxR/Xipm7K4We80ksDqK6NSk0To\naIwryJNndMOFw9A0udH1OXORGNt9ND/0+HDQjbhntfFO0hOySRecK+GlQLcr\nMQsjEzgHD8UhkuQS0Y1xN/4FhLHg8v0b5bDpAJZXh4TPXlhRmiM2zAMrAwdb\nDDZANVS+QJTM/TIc8ogEU5wpBudFRIUYL6sygVhXEVSusrnhca3JhvDwYgNR\n9pr4YJFKFg3x7BHa961aXzs4zw/0dxeXOvV1jU2+m6dpLgzTPsoZ6/tMBBL3\neiIIueYJn9o7C3bL0FBi9CWtOaFW0j/qo9WZ5QYzO63EHJVMbznaY5CeFow6\nHW50Hq9yXKmcnb514FrKA2f224n3aced3W8FYXr3E+k9hLVrE3T1ATx4L7eJ\n/EtlJgyvRuuuc/KfNIZjgIekZL5ZYVSVFyWY6E9tcG/BXd4CfjWpQhNyVKFa\nr3rCIlopmRoYsMyh+G7EFu42WpVk6uxayryRj8j0wn0r78ah4UXndEE8YLpP\n9f5CSJNEjgbb8Xu3HItn3Os0YHVgvsh/wq5xC0A105vEzOAbCiPZrI6gkEZw\nr3n1\r\n=PLxU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBwwRMBcpBED41PXMK8kyXHsBqGZTnkWOdW6n22Rss8HAiAifdE2eOShBtb8FskJi79RTFZftDVcdJCq228RnV5+ig=="}]},"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-fixed_0.19.0-canary.89d27ca5.0_1601947644220_0.19887192095078476"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.9ef2e7c2.0","@material/top-app-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-vNbdsB/oJrRPswGXauekTHNAqX1V78ONLzhKe1beXmNY0AJIQSYEe4Bc8W76FWO+AdrvTeEkVzf9I0Z4KJjAoQ==","shasum":"af9fe3a3dccc00d878ea0ad1898ac2b62871c8e4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQhxCRA9TVsSAnZWagAABPoP/1VK4XA8EwtkaJI7HCu7\nbT5Zx6guByDSKzlyUDfJJ5uld/rKTi8iHSeGyGfPuVUG0bBytqwXg+xspjr0\nD6DJ67Z6U3VfSehYWUKL3xHvIa74icvJAoDwbTrJjKasecoesaTGc6BPLcWg\nW4rarE2po8+r/HfdFUGycQaFZUE0JAjtz6xz8Lx97lmgFfQITjG69zqfwnA9\n0+G+7cWFI8q/TKCga/HcwMTzpfL/vpjoG07eDwuWZNZA/2F7i5jGi7fuHswr\nnIU77dx81zYoPbf6aCo7kx6KIqlpIyB6HfKfGpXD8d+0HDzjcv4C/vPZoQXB\nO03T2VtaG/jdtrLri6KdzOzSK/KNgtGaMbVj2ly9C7EsXbiKlOlBEZGqBipd\niWDwNJKPs6j3TrAKERu4Pk31Cv6x04WhxPHneymzlpEhvSHlXM1M4lAu3MVb\nMdg8ul6QCvPsRIMke7cHepNiuV3FcbtBEMFe9hVw5yFO1i+RUvKcbC+QoBiw\nbiMTqbg6TYfF6at28UKy0HrItd8lz1rBeRyvb3Gao7+fI9YkNY6yLC989lTM\nBroDQYv+fDVoedESU0cUuRN0/ofe9t6g3/btf1IcRtx7uoOKT92yMnYmvssJ\nrRCwzhR3gqOJI/Red4Iq7wk8j6PtdXjQSoNq4YqwiqyqY9cwKqL5UXNMF8DD\nLRfC\r\n=wf73\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA5RC3Cd//B8Twzfjn/n/qaU6sq9bgDujFLK79CrpwDZAiAUdDeZqdfxWNp8ORLgj+NvlE7CK2s8bIwMzfqeHpmC+Q=="}]},"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-fixed_0.19.0-canary.9ef2e7c2.0_1602029680682_0.4863410915163229"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.19.0-canary.96c8bdc1.0","@material/top-app-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-MRxvP4QK7l9fC/PbEr0jeR4b7cAeWsjRmfFaH9URFZ0HzAR0FbfrNaSUte/heOZS/nW+5N3b1Ib+Tbg7JsE/TQ==","shasum":"dbdb1a986de654077253fa0a38ce177bf95d332b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0-canary.96c8bdc1.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffiAkCRA9TVsSAnZWagAAf54QAJYoh89olLmLUzVyxxKi\nDTPYU9Z02s974xOOmp4do0gWEJFBYDxZNfsoiCHXHHJ9/44z3PPTDTjCaIAE\nXeI8YAPwgJYSu3k1E9Ylaya4T7PY6/cN5i3Cl1vobl2FWNv24fQNDW9EQxUT\ng7vJr+YyuB3N0JNHpYtZDfdvDOKBPRQ3Px1iXSuisIUZikLLE7Df0muwnQvQ\nNfKfa7pc1TAbPBv6QAKeN973Qs4981PbqXMymb3SRfhKqhVYfSr7K+r22pwj\ngnyZ0VF4oU5ZtBHcMOLsh6FMUYrlfLSKJlQZ/v1jWVqt1z5UWtNlawng/h4V\n1F3TjPsfKu1wcyOyZYlOa1th7Yy7QHsZvPTTrhy/omaMSSIscWLIQZ058AX9\n6T8Kto37hPXQWoc2j5FqB/DdmfxxprMpvjt0ujru1PZd0i//JDKi7ek09bL/\nHGuafUE0BCGqhy7i2TjFckxKrm/gDLeHfUIRmbgwwGRAq155I34uEYC9stQP\n+KbWGGqcEHQSWeeSA8OaWnOXSAOxf6zqQZBdfstuBZAyVlmTgQ1ZEyQSnmui\n5ijZaMxXYNeu4Dq4sFaOxwHI07tgQdReuviBQFsfGgx0mVhPAh7LfJKcFKcp\njr10zxuGxu8SBj2tKOGSs+S6ooO+lv4e0AXjOhDeQwv3rUQMfUGYxYo+Ekq/\n/zFr\r\n=9HuL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCigG3TKIbedEeu5zPGQZfHGtDyBvLGpEapVZB2FyR9kgIgANbNYgrJ/3QfOGA5EHesZAYpU2TgYMRYYNqc443RXXs="}]},"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-fixed_0.19.0-canary.96c8bdc1.0_1602101284261_0.16275840546276044"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.6c21f034.0","@material/top-app-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ObO2x7cvtAGnFlbidJXbAqAKAxCkvVPPHrK1BZ2QV3h18ooXT+DD+EuyGXH3eDsqJhNU4bm2HNgdUO1DYl7EPg==","shasum":"f98b94b83af01b59045a6eb765d9b71e0c55687b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.6c21f034.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkGaCRA9TVsSAnZWagAAYz8P/2fXjKtGbvVX6QTD+8jO\n2T9oUxyQgwQ/YYfvD9OMOWFeiC/EMl7T+hIGZwmtEE2R+Hbsy7MeX2arffjM\nlW2hzyMFI3VG/2AoUyCpgu66UFGzK/fd+lJCwOSw2GDSU7oM5cSWle0mhouP\ndprug9F+rrVWL4ivu+GxaWO7lrcQsUteafF4PVi4PUuJmEpzWIs5q5i5/4k+\nWm5U46ccmulqDYFKFFrRwNvIV9ktT8iUPnTa/nKmA3tu9hKMcf327nQhc6Z5\nKKkFU+mTHnLWZVEVoeI+Lpj2AJ3+OR6P4Avwj2JR0kok2Fzah8YbVOOjTk2L\n8f5row7aK7tSyUzg2R4IrWb2SPnX4baaBnz39Gif7jhShrrHKwkeoXGy4SvX\nbhgpYg7tjGV1TX/3Pe1a/Klsf37F93V7PRZ0A3TOZHlYfLPKwY0+cjFHa8Vh\nThIHB+NjGSAKxwgw/zfVD6z4SgXnktx5rKn5ajR+3j7h5qrwDIyH6h5o9AJ9\nprjEbHhi8vWwE9xHYwk+uDMyLCH24sl16uXU+uO47WEyvPetcKXh9dc3OwFm\nv+JXNf8IrnMDWfaQnYVgrl2kMiiRU5z8d+cpvIhlbQFhyWsN5tRWWHRQdgo4\n0kxzJekAKvEzUp8o37BgrSv9pqCO71uJ5DH2mu243TGpHBtuGEjlq8Ebgy8g\nxbt5\r\n=oMEK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3o3yLR/dwu0YPN8whJqG6U6bMYMMQOXNU6xwf5j8GcAIhAOKOwLpwYKIHxg95Y3tteFQDAlW8dDoSECqo46478Bvv"}]},"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-fixed_0.20.0-canary.6c21f034.0_1602109850287_0.5512542813027232"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"^0.19.0","@material/top-app-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.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-fixed@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-lflY6HGf27wimM1i3b0zRuQfhru6/MoYhM4eSkNJMxwVt1IidKylzni+UGO50VXrJNvxMbxMD9Xgji0EkIuCzg==","shasum":"38517271941ea519c4c00c52cfb430f64702418b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.0.tgz","fileCount":9,"unpackedSize":27115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkI5CRA9TVsSAnZWagAARj0QAIm14cLfZA3FbnGV1nTH\n67lEua4MRSe6ipKUD4uk4LjYD9hzKAR/JDbnR3scaNHgcWg6IXH7xUyn1GWQ\nybJGpLv2U99/3BD34e7iYoorH5vNBOJM+3pch9g2ZbiRAyzkVRsl/la/6Ktf\nbcFRalqMtFmcZ4G7cRuHKq+dA6VZxDDwSdxvQnljVJTVeQVVxQIzUxfIpyKU\nFjEs6kTixIJOB2wfKg5OoWx4SgfSOBXztAEWJuanU5Lqe3ngBFTtBPl1F8pG\nN6jJ3epgiWTva8KWq9ca9nXD7slCv2J3ZK+AHYCmKqB8nbPleTTp8/pc81N5\nHpXZXHnU6BvPqyDl2DrMpczJjMiEx3NL9oo/QbuhWaAQczooGVqG1Ni2x0HK\nXV5YzOk1TDpemsY2tiF26j/OHTsk1jZ9sC1M487ZRfiFujA2eG3v/Ux4zUUE\nvqhTR4ygpj9U84KqR1m+dKvx/bT1ubqqQuz0bgqJWCQAZpQnr5n/aZwhzOTg\nVFdt1WUOua2fn+5I6D45qs/CqJQiFWcn1obKQXUD21692C0X3sa6xeifzdwQ\n/+9l95VK2yG45Xz3l7NTDADpK7QRsChgEXaNoUGUom0IanKko62jNRUCoVqe\nrAiAnhGIPJWYYABKiG/JslnczWYk71lVToIqEKQzQaPfdnq80UCcFxMay8Ql\nnw5F\r\n=1EX6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC8Xe9cJ4b8Z7+FT6MwL9exmrm3jDFoKEPNDH57CGMNcAiBICAJN6prZBS4Jxkk3TWsYRjjrgDgp+BZsIOZAPdK64Q=="}]},"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-fixed_0.19.0_1602110009425_0.5614243564891048"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.1f026aaa.0","@material/top-app-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-FYxEJeH+aNzM75YbYneExik512Lvbr8f6tAjo/CNYBdItYDfNrxG5R+ETThle9vrD/VhQvpj6Y8gAI25Ps4g0w==","shasum":"829456c70c81e5bcb9e9ce00a88f4383808e64af","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.1f026aaa.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5iKCRA9TVsSAnZWagAAfrkP/Amhwk7lQc/fhLorbgji\nvVYxjDaQSiC8GB6bZ+wAJLgNmlH2O7zq+DSYgUZpkC5apqXqx53ahX9M7B5t\n1feSN4OEJGXeDn8a7/5NAH03ftHwYZ9bWI/KdjBPfr/JF+TAhYfaZjvslxJn\nRhxa1HTTzSAxkUQ7oujYNBzxYqD4x6wj0qTteja+sLh+xL1VDPsH5ucZ1G0S\nKR9SzfwAIYf4dZrZIzpeWoZvBVM0XcrFXNYRe/b0u+RgsiB9gJTWi5qJo4Tw\n+URUjZxcRGH0n0GCdU/Ek7zCA3e215zOI1rgMbOiQmmhGQFOOX/V2/kYBbot\nNbXl2ksV/PU/Q3zvpyg6BQnuqzQcguui+D5As4dERZgBSXBW7CVR108s6Vsk\nPo4t9DbWXhQUzW8HokkMoaITVPqZTB8ERjtNKLhYsZdrZBxLInX9NbUozCXR\nXQjTPoV4ZiondP4TTtLykNMG1m+T8qSRuA1xB/Ez4rSwX4NoSbrz39mLFTDO\nbpYLC6iE7szc/b746cXa7vUJ6GxE4Sqcc0D15sWQXmnnSdGQ5h4OBJT/nIKb\njJFAq1Y+iRWO5JEBWwIBz/4Z4psnSS5Vq9b6IREwDQtKRAS+n1TxvcVZ306x\nmhi1TLkS/IuaIi2WYF+BLdk3EWLnM4aLhQY1e4y+zzcHCkYMsTp9tWj3vvrE\nEob8\r\n=AGhT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMvy0MhzFd8Ky242w44Q8GLkY/43jpkVWDKZ5ntbxb8wIgavubpIjPGLjTHgWwAGrrOgZcV242/5V7ArV7Gzy3xSQ="}]},"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-fixed_0.20.0-canary.1f026aaa.0_1602197642193_0.3807997666981646"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"^0.19.1","@material/top-app-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.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-fixed@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-mSQA0BIjAnFa5P6wMZneKt9FmG+WKOErfWMY8rSpLTG1K88E+Fz7QzVY3uQ6iabfeKi7wQUNzpbqSF9y3YiIJQ==","shasum":"f35f61eb93b9ce6fa344ad4c02e68b368e9f7178","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.19.1.tgz","fileCount":9,"unpackedSize":27115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5tZCRA9TVsSAnZWagAA4xoQAImINNGeE5U09hPXq3T7\nfPLuKyDu19+JYFTBdycT2MhLrdOfg4unSTUIrI3RkgfC8gqkssG4k1bbOmDi\nY4mhfKwrkgy0LPElnluzwVm7MG0T2ZIvAPXuQURr190l6KCR+apT10QUkqrN\nv+o1HMavoh6NfI4pUxe9f8ftTyy0OuovX4d36fpYQRPVrDokGI48Kaj8LCkK\nVjyDqfYIIJS6+CWpfRwXX9ClvvmO9iHtcvPS12w3x0ZenrMCqQoIfLNUR5mr\n2o5iIWTQDhCZWNMG6N91Dp6m6efx6Bifjc9/YN66Fw8Enzxq87QqgLL11ZeZ\n//iEmZt0EJjPlVAwOYBAsc8153jnKXA20MAXcxspZgKiL0WblfZi/zLBDy+D\nOLFmiixLwxEsBhCv10N+NliKofMWF7OsTWTM5ZhfeLygLTXfCAPajl74s/nz\niPQgwLYgX6WUKaLACH3WaY+K0dRJLjQbSLS5vCf7L2Wg633rTYKItlP/HJiU\nnDQ3ZmngXUNw6hIO3Z2Q4AXAAZZDXX8dXVDjF+/Tx3QF/lnkzz/lPjG+1o1g\nWzXJIou5lIOtc5Nfz5Ts3vA6VKb+nXPmWZx0ijXdaz8UxVacdkJsHe+Uqm1i\nc2d1AIpOf8IcPFEkrtYHTNgMDOXFb4uCK4A2Ug0RJL7NpEhMju5rpF0Mvki4\nAuNX\r\n=FBYa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB+8WtKbUOfOtZ1ybRAIgL2JPz6MkYIBxW0uVxmjMau3AiEA4No7yttrW7gKAv8lcw/fsLxFl/M51DryCwAEmtL82TU="}]},"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-fixed_0.19.1_1602198361365_0.7372643060598743"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.5f6894b1.0","@material/top-app-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-YGd1gwup5ZtIPwN5v6uY4cMuypK/e3H1Guf2Z3cgIzrmYml8iESSyQfPUKjNbDTQYxTAA6S1riXL/eBYFrDIjA==","shasum":"9a90ce47174d3eec85daf780933cf1cf9eff42f3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.5f6894b1.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5u3CRA9TVsSAnZWagAAj8sP/iEugjbQC7jwwiJWrfcg\nyzTQFjzwsTgXHcnn+m61wS1/Kt1WvMZamRJCTLtD4f83NV3zGXQ5ph4Xs2Al\nSMrHSpWA5Sbtd4qmM37KU5RKMrX+INoh6XYGHAG7DmlbJ3JeDDSP+NpEutq7\nCXstvmwjPC2zC9ggeR3ToTS+5ahk3B8mHFdA+oBGJ5ZhkFAuOPcp/1zeJ+x0\n4TO0jn7+msNlMt1mfjzLYqt2vN240Qd2hpBGlQc32WJCbKBTzkCuw/L4K41T\nwbXvRCgbP/rQyiLU5hyLVX7dh+Xrg7QzrAQ8DLF36Dm/Kxs1ETDo4bxYIV1G\niBijE7p40tSwVh/Tw7aL6zaAIMSyYO8/ebgKAiJqDZFBCw5s+DN5VKGs3cFb\nMiR/fL1dXAFObutvrvBBMfi2wXMDrVmlkF4hj0jf+Osg3TX8+5KcTP3328MZ\nr5GBVe7O9OI8wHjY4xfGWdKJkm7xfzxbEN0OZvAdlxLm9nfQDQJSnC/U4VhV\nOiY3My/8A0MttiJ/8/s6q1wGqQIz4nEExtrdau1adP3pJ83X0jaI9fUNw6pH\n3jyc6ActEeF+NezbdrmxzeRQF15AkwUiF7XmrmeJjTUelBJfSsoI0YwREHdy\n4RhcIKBWi/v/wWvWRPQUTyk0ps3QNvZugGEcnH9LcQVJvf2+vo5IBvm/pxtG\n0Ids\r\n=aU6B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDC71FWuvvk9pEDMGvG5p2u9oiS6IR2PwLgUsnjTewhogIhAKXiKmRY6yx7gbyHufoiv8YQmQ0Yqm6fj5R6RWEZW53f"}]},"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-fixed_0.20.0-canary.5f6894b1.0_1602198455362_0.18847765611105904"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.f6260d06.0","@material/top-app-bar":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Yb9Fn7Y+crFACpFguMKQaxUIpNJwC4vc1LVeWZn6kZuvbaWnFfe0Mnb8PioR+vOCOJbDdKrcj8EtBfdzmhe49Q==","shasum":"85fbe3a47364060012f829537d2a1d21c96c5d00","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.f6260d06.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNn9CRA9TVsSAnZWagAAo40P/jxm4BzShJ62MyHVunfX\nPvYyKQvyZ099MdCem1dPMweKpv9Di7wnYedPG24XcqLYAvWqz3VQtfVIjbVY\nLnjfNdrZzZasx4IZjZzqr38YXfYDZNYN24+UdX2WSch+zbZckyjQDO46tCKX\nKrD+YBnrZoQ3jRJz1iolZjFTmVrjzXNAoM0YRm+8WDgoDIoiF783tyzl0DRk\nYOq4rjenKCKRcVjeyXPpPkRZ+L4+3Duch3z/c2ef4QtfjuNKj4oSmtbBcJ4l\n1xuAnZvHLmBhqJAAhkRFQbGxghLLmZmuWURDtSPDqpvBUfV83FQv9mujIvas\ntQhBJczTyP7UgkYwn4HV4h+wSQj5nNCk1TJojHjlCfeUx8/qfN1MxvQ0NHyd\nIGwfnEN4ZhW3KwnVKDmOokJSWult99nlRTGAowoRjmmlvooVg7YO2nahxuHN\nK3fC4jl6r5DgmiedDQubw3bqEawDC3J2jYs00TvUp2KslAjmrxPtNWYxXB1K\nyZ3u2ND9kZ6j+b1sRzdLTi9SCgoqK35KYCUpGbrniWh5iUS4Py1ncZc+osQN\nh08iKcnd8whXTigHX8rkgqCbkrirH2qFdkpZjdOJVPh95fYP/c2m32esvSTv\nR897dkQh64Z558yRmDdze4S3mbv2Bj6h8SHJXI+sT8vfH8gIwvioFks8ZgGA\ndhwc\r\n=RAO4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHSaUR+4FFoFI++bxWvVT3pWp7joJ2DoyTVx66RlafarAiEA5nxB3ZxC63rlM8aa8XRBOEC96COxxMql8elp9ZEZR3g="}]},"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-fixed_0.20.0-canary.f6260d06.0_1602542077091_0.7840628914824133"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.2d1b08aa.0","@material/top-app-bar":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-DPYF8AIOZ0YF9/REKM0+UxWtQnOzoIU6kilps4Zny2ErX28E9fcqw0nddsnNqFjjuGm58P5RELRoWa58rxtyTg==","shasum":"cb12bdfd1750455d68168b5b84d7f78f553ae983","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.2d1b08aa.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf57CRA9TVsSAnZWagAAJNYP/0ZdPAKAZkstokBRHXPh\nfwbjzPTCBqv7tITfoLvJw/h1Zc6hqBUQWACy6D3/PDa9Dg2NWpghqcdi5Xir\nuughaA8x8uE+zDuGQhwXo8lKxeCUoIbfatcycrkyEMzaUC+hM/NrYdUCKF3q\nuXiRHpQytRfbAcrjM3Wkt2forBdz4yFdM237itSmq4VFcElao959eJpMXKyV\n082xopuJVd2W5PpptBIbzau2I5wYWKepQir46kvoG0GLEV0k6gSMYToVQvyi\nkA3QK/5ErIkGO5KfHlb3dZUo8HXDmdkpOdGg8UwHiDmU97pSMLIjpHkuwUtX\nesMumXZ0zx43V+JA4HRkssZQlE70vSl+bnwe4W1zL5akxSQ9SzHH0w6xtDIe\ndtZCDfYJQCZwX9DdoEsaaA5vI4AUPzxWfyw/bpI23JZOvJ8im8JdtLzOU1vn\nQEhR+mIlLcSTzHiINDiGoGsUGXcAuIIb2WEtkaITvnJ7OnERX7yoawWNqgv2\nI5anco/eBsNqDAcpBYsWukFX2Tg7cOVemGorq0doxkV1CtJkuAJ9hGH79bqi\nHyt29y4I9B+ItmiKEznTv/lwyta/CfFZBzllxdebTjlS0UFA0NEodRah3Wmi\ni5HERIUAf9OVcc4WjK1FDZumWBdi6RmeW/7TxXok7er1bO1arNSieoK0dUc4\nZHTU\r\n=fCXC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH8Hr4YiwClI0XL/cHQHrXAp33Zx5ssi8r7o+xMbasr2AiBGc3TOUSEAUnQ6nr47U2ln8BXgvdyf+a8s+m13KNHPWA=="}]},"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-fixed_0.20.0-canary.2d1b08aa.0_1602616954686_0.343139571895275"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.5bd58844.0","@material/top-app-bar":"=8.0.0-canary.790ca85fd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-oibbPkGSLlSIv061yF4PWag8qAsW/LxpH5FVMjPTd+dHo/lC7PGoAO29FpViZQc8hpK75EBkwR/BUnEm1lInYA==","shasum":"df9bbbbeae376ace9dc08db23bb3cd92ccc9563b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.5bd58844.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjxgCRA9TVsSAnZWagAAV/AP/AvC67DXTqWjhJAlw4fZ\nkd6q8JmEt3OaUnHApX5ivutGRD9UfasSwAggJ03ndb6rvAE7eN8rOesQNxMH\nn1N1e7FijWQ1+knddi7toG0gVtGO4WlbZC38lYLsjl6zebTm5NT9Fs9yIx1V\n0rJ6KwfBHy1nopa5WLk2Dn1wHmfnUQZy+SmF2S7/dstTMjutrwYZu0K803jg\nOmvZiwhmPEippOZh+kgA7LGrs/QoGlPepjbVxUphMAuTlTb+w6MCOjV0XK1D\nFkaXHdrbDQ2dyAvUkt/pkdouVm6+bW+bjz5/hXFv0XTxNmQqqMiWtzDhTCOA\naL4tuk8j7T+YcE1+mv9ICdrXbzr3P/65OzLuihfpWujTfngi/n/4IDSMD4rb\nDjJSH0TmjKJ4FfwTDtJ3XOQyS00CXegHeUNJtBhIktGgtEkSww6iRw1Pg1rN\nel/MrjnoQmEx1Dp1ULaUU4skLXRC6jL0d/xpw6rJ0g5ENURbVJKvX5JmqUqk\nDIr8JmZAwWMH3RaUIuf8OyDx1ZmdUJAayIWlB8Fj2TPWLrRZ3ZvVV8svm3sK\nNrfuGIlX2MZamfh1t8Tsx2+mL09bvE93l14S7Nx3M0l8bg0BtPGstNS4w9S8\nSNSBQyI+uxq7NfpGDCA1W0kkbh7Q827rTloTjLN3MhZGK3xuXDpRikwNMYY+\nDjym\r\n=8qbA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOpXSQNhhx28IPQ3wOkwvS+gZClm6W4Wgdv0U4V9md1AIgL+xUGgoccEutZYEd5BH0YbCPt8wFPj3dmOgT3zSlAf8="}]},"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-fixed_0.20.0-canary.5bd58844.0_1602632800036_0.1277489539622203"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.bc846b29.0","@material/top-app-bar":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-EaAXF0nZVeqk4r3bXg2tSOXSUixm3lAeOp5lQe2o24fUqlCby+gypwKiR2hZH0cKYlN40zX8LZvRLG9vj6kUgA==","shasum":"3e986e1ce7394bb86b6dc87a2a7564f22ad0e9ac","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.bc846b29.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0BrCRA9TVsSAnZWagAAx4cQAJjwGxGD471zqruPXNOp\nbJsIMuPfwWgiprZw44MFNV0tknb9fi2zKWyhohPlRTzIFgO2y74syp0zzY5N\nzoCC/5cZtsNWsAIMh3XDstgzkpkuyxGlcN5/mHTLGco4K5UGrGfVSmmJ08uI\naOIxLvt+p6GhZPS8XD0e7tHpHDoaTktZAeX4iXDOsXxk1UaEZyT9/9vEZc1P\nXdSG3ZE5lWcBHh2es099icHNrkphiCYqOIc4WFvVC3NefXrnNMwa6h2K/+Bh\njPE+eBSy4azc0FWukt33C+gwiPcc8x/nfhVcnEk9xX1upjZS8UB9EO3Up0nr\naaz4Gp4or9DxQRini6Qwta8PMG2C8mmwDVwIQj7HFNe9NU96qWwq7VAjTIj9\nholm2i00kcrLorl4N+167WedZBXJTM2TXXUo8fxgtAKauPpIpNJy7Y6Qh7SR\ndeWs9OgRyBjb1wEbAgo6Vj5Ha2Y9ou0dIwDpSAqFLzEIqnlEb3M4JkC5wNH5\nhAfUmqwis2fWAiCit8LfKcuLfPAKK5jmLEKl8jTyhVX8CaJHv/5LRRwuqcFY\nLr/D9bwiT60M1zow6S1z9fUg55qv7HE+1Ge62I3/7m38sk2WvLjuhHv0QC5G\nOOOB8faYpFU8iVW+6uBe1firODJfUxIQAqbZ+MfJgQozZSy9xmVNhG+2TaL5\nusa9\r\n=RXtc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDVKgOrJaEwFVRagRLNzDnOuBkUWejjnzdIshYKMF+eVAiEArru/Q8xdYju20zZuc44GsWlv58TlnFLZRScbRSUjRd4="}]},"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-fixed_0.20.0-canary.bc846b29.0_1602699370627_0.7575460942943728"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.3280b686.0","@material/top-app-bar":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-5VPf08AozfypVVpaDfOAgHz17QdeLeSBL++bJWNrRRF+Ac2bISNFTNF+WvD3dF5bXB55wbsxuRxu2RwV050MJw==","shasum":"5ba60b561070af224d2140ac6bc0d7d4e98a145b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.3280b686.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOkCRA9TVsSAnZWagAAh4AP/ifxy2quGyo0WbzVHCwE\n5CYeuLF+9FO1weqPo2nHxXf/L3q+hmq2BA6HaK9AKnEZ2OygAbUubO9OyUbR\naH3erGQrKE7jGk/50DREQSeJoSFP0npX4ssPZP5mR4B3GFUbNjmpwG/2OccP\nec50tfTbuTRAZBU5P4BIiZICAA8P27CAh+T3ZOcNLgM6OnHVRaX/6DnxXfOI\n0MAAjWd2uznUC3ki1fPxHPXF/jHyja31l4gXWY6VLgULwOy6Qpk5rMldo/B6\nm68sDU7UdYmOOFvVcfhme9sLSIixjGWGKbW9p23JXJVO0d6M4yAvIy2zzjCE\nmZlfVELITw9X4otJbYd7xzLJa0tBmB+Hz+sMlH/VrzLQI0msaL1fory2OHHU\n4TSM2+nBu092VxRanLIYqJoqwjypd52CP1ebSpw289sTh+vslYgYRc93/GxE\ngeXDzw4vnpZcFaVFhby/69QZiXGAMQECr0s+7Q2aoTt7jSDy0f/jjLgToSqQ\nMg39DMFKOf9KcJsrgNfJSozWOmyvixEBjGo7dscu9UsZSHulDM6Sus6C42n/\nVOtP2B1T/yxGBwPZOJz9FQcbOKvLmpVCgq2BlpPvV4T7iJQ1BCXM4ZnWYtZS\nxqg5sraMW/FiJvGWajQd13+AinRqGrEPP8kfL19rTuRYjm1fiZTwqRya5GLT\nFoQq\r\n=iM+w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEskAfEo5IRCc50sxsqd+6b0hYqcijTwvrXVGqUeeO5+AiEA9pKvv3uSR+x/pr95/hiv+iQFYPNjD9lndyMwJLuL1KM="}]},"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-fixed_0.20.0-canary.3280b686.0_1602806692402_0.5493383680610433"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.9e94cd38.0","@material/top-app-bar":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-zrbsabDKjAE/BFCcqggelc6A/7p9QFpHcf+Y1gHfZ+7y6qIUhHKY6kLBO007PVq8fNOE1JJd4B6x/jn9Sdj7tg==","shasum":"8fca9c72801a9dbed38f033f0a85660b408d1e22","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.9e94cd38.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig1HCRA9TVsSAnZWagAA2tsQAIYuav0G0xMYto/G8MDW\nI3VIKjQUBZTlks7cCzX5m7uV0qygFH6gJ7AgTOS++DPg5PabcMZxT0NzIDrc\n1xAR0Y9T5dDy0+eEU0P1Osj90C2mH8Hgf6QFnGAcaPGKrfnnGfx6GMp1hW3G\nby1X+ibp+1h8hwyuhvOKRQBd2wCI2EhWkXcHEoVe5rBUxfr2MZyKZuMHgelv\nPqLPOlOIU8Elw0hPjZY6wW4KTvy0qsXocUS67HzChUxN/LiJ27YeNc0zIT1y\n1eXLmNFEcSq9xFNsXODpkZKFs4jB8P88gXJtRhZl9u8uxmHP76dqhaa8m8AN\n1i5krfZC1LqfgPemhcDHNdwqTHlI6gAkvc6zG6PbuB7DP3GI2g/CsQbBQ5DM\nFvj+b8umdxj6R9cnq9d2TbePk5V5uKfwu7z6eBUd0lQ8yANnkkammVIl1KKJ\nsnnftweUtlwmQ4tl3Ybit6XxCvq1OLF9zgGTgkuGDV7tv6GXVAQMFJ0mJFaL\nRHUN0vmcMphDaHm6U+GmD8jmASKLr7kY6U3VUfWDVz1HaRdrN/2ICXWXRvHI\nIjqK57SLMrUDKuT8wGI7MKwSLSnrkEg8gN+3wRnIN2MQFw+TYeH0sAZ2MWqX\ns5wCAz8o4pdegaxy32OsY5qs3Qs0JyuEwenvVXnQWUWzY9IIQrAyEWaLH0UC\ndpjU\r\n=noed\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIExt5xwT7yPeu0VODImAwXD86njv9i7DBijWK7gdWsQQAiBG7eWiUtB7SbEJOmBB192WXuddiJ7e9OiopirNSMsW8g=="}]},"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-fixed_0.20.0-canary.9e94cd38.0_1602882887019_0.5501979587096573"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.4773c773.0","@material/top-app-bar":"=8.0.0-canary.2ab716cbd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-BUW1SsGNPW/esNp9iJqXNGWEFpsJ4nQZQcAL2q4Yqz52/qnk8Y2EcPHSIXe+lH1tBe/4J4LX+FUT5QeXtlUq2w==","shasum":"6d790b83f0f6a1fc46803d72aa3cf4df5716f393","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.4773c773.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfih/6CRA9TVsSAnZWagAAtTEQAJzAf/x/IyswMsitqnpM\neMFo5wbU/zVxsvxK7YXrhJSsgnQ7LwPFqD8kjT2I/EMN4GBeHoW7dqMV/meJ\n/IDidivx81wDxsKYxqa0zsoJkL8SAE5H22h0wf3q/k6ow+9paFSRFcxJ9GMQ\nufceKU/3Y+uf3OUDrHjYJhpoWVHTV7oBFS/M1dWaPmZeAsJm+PXXotvYJQ/Q\nqiywPW8nnzyMVPJCZD41/L3oa4ya+QjL7j2gsaNAMrWkGCpY2vhnYDMeveEd\n2Fh8sJsOteGecKRZ68kgM3KAkXYxuefzP3AbG/hH3zAWz5An0f9p0L9zyYm9\nOSo+kW324hSwCvGr7kA6MvMK3Y65M4qTfQREkYf+Hzqyr/MswIexz+I52xrZ\nmI5nksXHFa66gDWiX9hzW201NrZqHuS5AePT9R3gVylC7f6MVbh4wivRYfxM\nxE78ggR4KWz3buEb5gpoDV+u4dqnXJ6Y4EClb6SQR1M0QY+6zOse15x50NEk\noSSj0DaKEP8vqWLujMu35t6XJRrKp/lUkqHsimAwG3to1M1inaX0UWPoI7a/\neRvnhmHUTXmRoudGiZ5Q1vC6fJsCjsDAxnfzd0Jr2cCExRaDPPsjDtuNyqzE\nooi7WDkW6pYQxYePtylSPliduhHfLR//oGphZDCegA5VdwTBaRHMzYDxn0ag\nLjkS\r\n=81bR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLa+XrYiBGVfb7Vi8gJ/DWM/vsBwhFxkDys/mNLVM9fgIhAJTVOLtCgOTmxyqMg9mC9GlI6wGyyFjbvYOWP59GuZEp"}]},"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-fixed_0.20.0-canary.4773c773.0_1602887673565_0.29485787392625573"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.65787913.0","@material/top-app-bar":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-I3RxNB4QhAaIQT/wuFVHI2qDCun2OvY9O0+fBk/HEWAKqznMv1VIdmxAWuKYHQQvHzKGbasi4CL01cFg0+cZ/Q==","shasum":"c43375cc66864c95edb6a06cc9fbfa8302f15648","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.65787913.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjeAsCRA9TVsSAnZWagAAU/8P/0WU89O/owrMnGQIarqc\nTb5XM9E4Ly2qYnFtEv2FqBXvRFp5i6C4A549OeeWx9Q9Ugq1BAQTaL7kaAIf\nLBAEutgis65hN0ezJpoMynSqxVqutBLGFacNHms+Q5TPJT8wqpsIA0aV4Tjx\nNGDr23og7k44EV5Ck1rAb0JU+CHFMuw2HBQbD3efLAAy8JXC+FxoZtF94xsk\nVCkt9aIpnI0QEqjV35HhAwXay7+2DrDO/j7YfeNsg0Qijjj4tGA/6AqvTpbt\nlSx/VQ+N4F71TewMKH0l2tXpS3B5xL6NVZBWtnHpgT8yldQ0jLfdRWMrC4GE\nwnCAKC/RPAUKaJ5BXypQNv3D/wtjNrzBaD8W6Vt0URVlr8LtS838RDk7z8oj\ngydJo7h9OGiyxN35DkfraAJBtNz9inWd05ucqLOZVrKkCBj4HaVuXZSpyYQQ\nFWrP7741luun25MzNBBad9YlbFGCugtDYzUrEAq3iPiS6hY2BLy+WoQelRXI\nfq7q5b/FvZaiy9QJSs2cbrnyApv7hxYfMdhryZiQ+Zs4+TtA7xX0iN+SLcCb\nz6HRS63RlzPu5k30xzP5xLvbzgCwqz3vvhl08QwKq1EWn/myC4wq5mFFJL/x\nX1NdGklgjziyh3l8iNO2ZimzjmOOO7+r15OmMdYGABsenFU46w6w1A8GqZhq\nhlfr\r\n=4hv/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFAAwBTakkr6KIHernQXglPFdO0RJXH9F2HPV8zoW1TsAiBJrd4qa95W9Z6QkYuDba5Pl6XSX5ewBEVKXglKFKYufg=="}]},"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-fixed_0.20.0-canary.65787913.0_1603133484540_0.2829206031903637"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.5485fba3.0","@material/top-app-bar":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-0jIMiC5Q3Giz54uJBQ2VpTyYmC+pRtPmJLzo+FzlmtCIRiWyC06skuyjZuOexBZyrOUJWbw78jUXZmSTVQUGwg==","shasum":"6df4ec770cdfadc4b3264557c170cb0110f5ccd7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.5485fba3.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgQZCRA9TVsSAnZWagAA4zYP/jdu4KJuYoCu+FuW4b7R\nMbzgH390jO/9A9YGL5H5HPmosSP18u62tPFFiaJaJUw9sZ0enzLnXXxu2hR6\nKpSxQ/QpdduBYboM8GE5RztRvoYR3B7WIFXhi7c9bVj9zJl4B9qD5XqMNazT\niznMWA61oi/mBzrmJU7FOZ1socBsuIgDsCkUMxLItNjzXn3GvuW10PcuIY+w\n0pC2LMt0aknlprMZpSsSzLQxEzyYKrvU19eLL29D0f2iOT5IbmChUZw12Cpi\nvemQbbNbXOHqJ2WFBvzrHCPbFYL10/uPnYNlqFQYySTibEAVsWP5vHfALuoA\ntIXpyXNqhAHjBkj+rUbQkgtc32HXJKL0JskmJCU7G3StYTpKGHVF6/mV8gvP\nkv8ThsIAPsQYikri7c9fysMrUFv4j8meywUvaW2AwCJBdfJRjFEBYVUIMsx2\nUVsSvsAiYbDeWdjak5n4pPRKYeYvyrFHbDV04tdbXgXJnaYGYmk+dhQr/XKk\nkp8kt2aH5QiTxK+/M/Ptcs+32xSfufXbrR8LuNXPdNZmz/zq+bCDURWY0WBh\nUvbLXMhDK0pm1YhKEtT+9C9+ZIfQAg8LyMM4knsrjuckPqlFlq0/Lwpxys6Y\nUDHPr5Id+uriejttdPVIISHeZPXTH/cIj0+Hn0UP3isSVgC4cDa6BZdIaIq3\nHj6r\r\n=Bd/r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHbhoGxDJFxZhH2w0kJGwtfegncKS1PltFrwK7W/k894AiBFxYJAzivjREaBbSwaE1tlouV64u21XfUjMFS+MW1CXw=="}]},"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-fixed_0.20.0-canary.5485fba3.0_1603142679922_0.5725555981400832"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.a39d0a92.0","@material/top-app-bar":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side.\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-q84MmMZ1HWDGay7z0Y+HJQQUrmQ6C8Hd7I4lTRjKorWFKorLf521y32yICggPzFvkxBTFB0pqBzEzjN0qDX/KQ==","shasum":"dc46cb0b9793b3100595671c4ea7ca13ff5f3244","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.a39d0a92.0.tgz","fileCount":9,"unpackedSize":27150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0n/CRA9TVsSAnZWagAAGC0P/RY/JQuvmwy+KI2T4pYQ\n02KIJNzmzrNQiie78eS/i36heEAF2CVbDj4/+qdzh3Dka2Di/BQgV/lld/7R\npmBUrpS5Eu8UhMaPZmiMvfLCNL90FKjjyEInfUjHz8qbN+mFHfNJox44egZT\n/9CtspwvQNjz1e6E2pciEp1T9pR8utE7HEbQMcwi3x5nb2qJtVDi5M9/e4lE\nIYBFrWXHVjbzO22pJQxPFdBDU2DXeL2OkyEH9MYa44chjQ++7yYn1p8xmrlR\nXUnFfn5sDxBJ+6CqEE3+iA7uBo+4pHaC2sVbVr4D9rNarE3PeWX11vqRglV5\n8tgOHVPFZWFQPKJxxsbjOCllkvX3geKEDHox7vfhkpqC0iS2EvHY9jlm2pYx\njTRrFFpq/VjHrvM+2AeIs3CrQkocYx+3zXhBuZ2XhovIBFvindgA7jyYYph0\npCeiQojLnglBlDBoXSrdVbmxpLROkJ1fIxPAv77ff7BBYTphz2u2w6FeRsmG\nGQ/heefNClRwnpfXLdthxQoNJ1ozrOvBz6ci8IrNaZniVCoyzTiOBGyQieb/\nqaEMJF1Y+o4nv2VodnPrk+VTNg0uNS/pukJM0pCQoNF0sXl9sZvaPHVBy1jV\n6d5l6oqSgo4dEfrPYAKDJfOkxigxwlIMhnxU5EO2q8W0uuWUOrvR5j2U8OMm\nCO+v\r\n=9wEU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCt0VLngOs64TlIpcW9uI38QTw4wX50Ue7tHJhj6KpmjAIhAKTxyw8D1u1+uLBQjPyqxP40/7VBgjDpo2frNnNNbq7k"}]},"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-fixed_0.20.0-canary.a39d0a92.0_1603488255107_0.18299563457825818"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.4eafcbc1.0","@material/top-app-bar":"=8.0.0-canary.ccc64eea3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-XPG77pJzYQzEYYY9NTNmJuUp6e8R1UKvRMGOx62RX0EUhCeEj05H55n6WzzXBQInnWfhFDnWx12MtFiKolt2Gg==","shasum":"9df425c447437d1ee6f18ff0f1693a55662a36e5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.4eafcbc1.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3YSCRA9TVsSAnZWagAAoakP+gOvIxCjX6iG575RNRrz\njJpiygIBNiDQSO2Pk/D0Dj/DbZ56KVsL9i5gkkJ0wqQn85/IT7shE5glyv+v\nZvf8sfWIqCgFjeyYkPg85GwA65nK7Xa16AFkOs82P/ELPaY2C3q9r7VLGSxy\ncOmC1JuBBm5qQIiDHwyFD8qzaIbsd0fEwp+Dr5UR2FevOLEKW2r+BXm7Gfrg\nfxqY1HFP52jGEbGCWnbVhZt9p5mKDbEOzJUzsAdUPNVuSIXRMTz1v1vno4Zv\nLIqztmPVpK8yFxNT1adkINMx1JMH/YD+V6EBXvWMfC0FxIeWN28yg6l0GMic\nyRe5074OPuSogQIYTeTBOC6IMIqxJ7x0DlALee1cOuFmq9BueSJ78SzTaF6E\nZbdPPDwlr98rj0uvGgsY008O/LcXoxD3swcOJn5OS4MvjaMwiSO7n+gW7X+z\n0vGWajOtTaMzl8v8KZKt1zA1umudMJOEabdjg8Bg0bmLS0yUtGPgXlumi+q0\n3RW2+QSwXUYo5RFhdm/lntnhzAWymvlWB/CDxot8YCuop6k+mGTq/dNeM1Ic\nz78vzvE4mX1dEQP7XAlu8kSCLdbYNupdTvu+stpBL6gFu3H0zmHIRP8/IPuM\nvC+uLBwGUe3C0cLAvlmGsABn+JShM+4FCOrebU9GbB10qFQegZOjzWTQAdyl\n/4iG\r\n=4Gq/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDivBti/TjhQmqKmt71PzyWRGPw+EN4jQ/D9jYqD0SIQwIgJT5IWR4vvSfvE4jGcleY5Ggw6xGXpUD2SqLVe3mJecI="}]},"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-fixed_0.20.0-canary.4eafcbc1.0_1603761682036_0.16026852658116453"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.32961593.0","@material/top-app-bar":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-x55Rd+kgn4gW7D58fphrwEEDyvEQOh0DEdU0k7bLwOEmXabTlwDtyaIe6vMZvDV+6V9zSu69BWpAZyasjPk2jg==","shasum":"a0b2ab1010bb09537ec8eb451f17ff234a63d6a0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.32961593.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL3HCRA9TVsSAnZWagAABHAQAJgaYLBXUicw2BiqIsHF\npVZtCsT74GvWjd3MkvUaBWPeKVBCQFB7mMpd0r8DmrnE6994jUdMU60QQh55\n1XkytEat0lu2Mkpm34TECLrTL1xIjQX+Uj15NbWiRfRHg3K/1GrhdO/tkptx\nHgTOhDXu49NTJhoWUn1zlHixTnYFkJJFtvOnFgepx68DdunUkaltHHpyn3lB\nj72t2B6uPnIBLv32LSwDI5s2YY+G8jQdnvDkBcRD9FXKj/FTzzywvMF8mvBl\nMdC02aFy9BaKvwIuYspSKmKS2cGovMvwb8EdTklpp9GKLMvFRqRG201+dFVM\nR0umXn+/rwtz/2Q9+IcQ12uTQ0wm4gbXsxEMwIEpjBOFbP7JwXaxcy8Q4I/C\npQRhMn3xGHbpSCW33rc95Ed0Olq83SAIjiBb4c7VQpYU32oCXyiNIXQRi6c/\nkU0hfYCkpIbKMLYACbZ0X9DlZ/NCV3EQvlfu5HM/9p9+nXnxh4vbBjTCVyNj\nwKfEQgFdLucyQdZcef2RVvygF7xasNDecLMfCn9lOBk8ZK2a7C0K4yW3U0Uq\nrYtnPde9zRkes5+okoUx/3dd7NVNPEVgwRyxohoBKrTc0NhJOxoNS3WPJGCv\nAoWoC1ol9crttkGao1kSHC8xDMFxLP8Va1lMjwq6P5bBNhJ07edFJsotK7gt\neL8a\r\n=d6w5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF6UY5F9zbntugvM0VrjumzzIORhhZ7NTRK68p2aroIGAiAcNW9Jq4NGLjQqz+ryjTckroF3lYuSU9/H0db2UNw9bg=="}]},"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-fixed_0.20.0-canary.32961593.0_1603845574544_0.12097868417683433"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.8e3a0601.0","@material/top-app-bar":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-qP+Ncwq+y6QjQKkCLiLguhicpfv4k7nCD7BTmjOQ1Lndy+QQGWa0qfRNOnjZbmaqeF1U8256aNnst7imJgIdMg==","shasum":"1c5fec7c21979a3820765cd780d75e2ed623802c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.8e3a0601.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzYSCRA9TVsSAnZWagAA/7EP/ifhG0vlXrJIhRtutbtu\niAq7wV4xxAvrZTQes/n231y9FeHuNjeVdXMX+QBd5sZ+cPKdHVz0jEFgtavw\nHlB4hy3rnDmFYB2aHqIrzb5YX3Dl1cCEKX86h5sm63VjeIwuhawccb85NIBT\nsYVst7SOx+Hwx84c1n1pUDVq7RKNCRNOtEDvPVdS0N7rEcEX/NXZHfti49sK\nEL5xj/SIdBEIV3NcwmqlBOhK2aBS01u5ZzlPuDIjeB+m388vDk1LxMoKGzIW\nruSqb5VWMqi3asPNxN20S35NUwO2SANgaGlcx7x+vDpl1dm7RmU5AGQ9AvrS\n2ot1z/mJBpio5gdqWsOtWMe0lePBF1NBidWC7bxZ1jYwbqYEd2RNA5uIEHfL\n2B1c7aCfgoEGPxY2tC5w566Pb125KynpHVIUbD3iVFtEt4N1gQorpKVFZhRh\n3UIvBROd0l+YZYr1NXfniVz5fQDgJ8ARB3mXoQWIE4J4cAPfIEFQvauDj3LY\ne1BEqdAPRyd39Ef8bhpexMVYGmBDEjLw9zNfPkASANlrQHDIBdbK0qHfCiIq\nz/R2qYCP9m6zm3H49hthrrytbHaulCuspgNIHSLY7XEXdGf7Vzomb1wJc2A4\nRv4xaq2puii8aITPll4DdbTbM+9BJ5GgeQvE8OECo5Ju33pwRoZA93LGqKDj\nH4rq\r\n=sw9x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDG5MWZakAjgnf6ObjrpiBDuBQwvPGPtH2bDeNVzlD84AIgQer0jA4sPnDtS9LruWOQzjIEhXbiox6ZSS8qSgz59Ow="}]},"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-fixed_0.20.0-canary.8e3a0601.0_1604007442034_0.5174583607896386"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.178c25b4.0","@material/top-app-bar":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-cAE0weTT5qNFs3Fs7E+U3Cq5qC3xYV37nzhjC268Ei2j9C/0yjp5QUreq29JXS3hREXem38OSPDLQcUrz8L9eg==","shasum":"85b1741ace26d0d86d2c3f8e1f0a8f75b7a04fa8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.178c25b4.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzlDCRA9TVsSAnZWagAA0qUQAIGGPzEAiJ7kxUb3hwMS\nt2nBppyc8Zj60MzBR+zL0IykBKIK7+g6BlVlUqux5z6ZmTCdY4bISNWkfVWi\nDr2DYvUreP3RmAhABQHkQNHBBBho/ojxGhkXw2U4WnyJ7CgVaX90yTCFZY0B\nxIB9PRzi9k6i3leNZhmx9MPinkjvwjMU+ksLsSxXOEl/YP7TLNunftAsZ0b6\n7tujaSPcWV5k9JicPYz3k2UvVdEvd0uZ1B0acSvN5+b58zHsjP2X3Cwxh7SU\nNzrSvCuXf0T1urnqA2NH9cT6j7nZAIrj06fFrrfwiDJYJlHCR6kp6sp8kBCm\nqQ2DxGHNzwVAFx6VHXEO9H99ZVL3+u54ttp1OwIN1vixNIECHAH67VysqRCs\nHHfjjgbMGjfzRQNidfOtGWzYWDko4cBcweQOsRHnBiZF0qjx+KzrJoRnjlnS\nAIqlye7aDhYX4ca+o5/0SfiWj33xuQeiU/k4AFplqHl0w5fUXWjxjty2KyNM\ntdaxdgYu4JP9EJflU/BONRhETlPp8N62n+tBK5B8nyqCgqSvxsgz5EiKvlNy\n5mVfLwdGrcHZy5vECnQoBFPLnlk94Cd8W68v7D2SPp+z91CXdKFpBCJuiG9i\nz8zp2R7KcllNSOj42nChdVbIFhlpoPRTkfeWbReGX8VbZLnwUncL5uwugkzd\nfu9R\r\n=Kxs3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCr9Ocl49GRv6iXhGuS3NBWLRn6a4+7YGXJO6fyP/wDjgIhAPdoY2lNZ/Ad1RFgXwOuZ+27ccfP1ocymk2ce0S4B4mk"}]},"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-fixed_0.20.0-canary.178c25b4.0_1604008259204_0.4217955416200734"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.124beb49.0","@material/top-app-bar":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-ilGOFLUO6cD2KtPJRFJr0EWpHDrqxpFdpZriLA+J1EIktwycdc9KENLOo6V6XngkNZ9cfBBjVbtEKmPkDUBK5A==","shasum":"fcfb23033832dcdafa4ebc2722593f92ab3d27fb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.124beb49.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKqfCRA9TVsSAnZWagAAu6EP/1XBqP5RxQFcXxq2+bSs\nLBx30MoPjo68/uLHFHqQZvhb/LGUm8hg+X4uT5QuGLCRs3mXtciu6HG1pVY2\n6hw2vpRjPHq/ZVyCYaEVT1a8qQTrtsiTJlfxGqSCAi1zmuBQBH0mA5GwgcjV\nTvGfTrrRRBkDgy09bjEZ8HevbQZyV1rOsMS3nly7pG+iPSk+7J5XG5LW/M0K\n2NyOcXpcTPKicKLJZlf2DRJW29qdERxfRTLpnfPUBTL0TVQK+7xFd6VCth4v\njvXnp9YDqhQdMqGrcHieMfNTElEZh6pZMvsGls+yk+0VLvf5N98lB6lylghH\nxdBmWeLQml/lRiwdMO3KNX0PpuOooK3CGX6X9ael59IG3ZAGnTmHOG1egnj8\nvUcBN6z2uIQBn75hOZKdq6b8/7RNsGj6Bv4PkzkzbQ0urSIS64zGJAl4GP8y\neFn72kS/W0OVmRxVHBeixy1mD2xjB+VN6nVDQKnB03bj1jrJpUh35y0ineK8\nyzcHesyfXany2djROv30c7o5wl5IQFNhK1LczDQ9NGW+0JqHh/81xZAoCve0\nOxcbZU7T67L+BJTihSzwnljxM5WJTzknA7V/T2RZjkvTSUpjwyWa4hNeb1hj\nyL55XGGuBiqyckpNQN9FRJMgV9lqLfD1CmjGPGDKBqcRn+txCBRHqYUpfVn7\n8aB0\r\n=em8p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIClbASEezCCwnd9rPooBDEm6VThtjexWwV+wobu3oA9FAiEA7+MAxSFPr3h34Iqzr1ZNC65spzzaytWQ+H9wnpj+IYU="}]},"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-fixed_0.20.0-canary.124beb49.0_1604102814627_0.6613667427094843"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.5937f468.0","@material/top-app-bar":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-zr2KBBwKLjg5Vau1hHypxncWFv+/rq5HYDiwTFf0MKIq3dZDqk4MF8wciUoQKTlB3bQ9F+QzlF8ut2ocK7Hlcg==","shasum":"1f056d7c4a23ef88dbc1848c9b202332440d3658","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.5937f468.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxfHCRA9TVsSAnZWagAAcZQP/3cj0S+pp5V0+6e4DOAa\n6vZ9Gc7QqMHvua6MSK35HYFltyDhLBb9os51ratFCJWaQ0HPhRrVqIT036JV\nDeD3mcWGbTQo2IxgWEMjrhFcIjQuYOIqKM7lc6i2pBfJKaeUfnJaLQ+1IpsJ\nZ2aRVxq/LOFiLTlmWxXkPAEi5+J0fUB2zyEZlxRuQeoS+QIvEMmGbVIqK61D\ny1ZqxoCPBV70HZ8ms7v+ORyJ2cEUBzNX8qbCzsdeqx6/Y9wWserpbGlZsT3Z\n3l/O3VM0Vp6lgaHnZmaHR49ZVYm+KHsrJk+vO0hF8pRORc6ljgtRSkxMYYvr\nw7c/GKy39jLemPW7HrxtT+VnRu83g0E/ymZwFhT60HDriadz4CFFSo7RNISt\nv/BRLWLHzzsWxCv9hv6DnjdWBHk7pU7jgPCIW2E5GhXzDAi8rosmWWn0JZ9P\nlXWhlycTioeNOyG/CFNrlmTKE6WBO3Ej/SkyicrWRDHkigOapj5oJGuInxjR\nVk4r5oY3W/UcWES8q4xymbSUoCRDtRuBsumDYLat+KmJQx2TrOSXrpjCVEVz\neBJcILaEXyuuHqTbEVQH1VlKyoR9fsG1bwMRg9N0uTmX+kYtKUwcEvez7O4b\nPRHXfMeJ6GBbwZjlZp6o+0RUhQuxELd3KegWkO9hWwJT/6qxf6sJSxZoYtz+\nwlIP\r\n=oOBY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDCOi60Uulr4nhKAphXLbcBppDtIh0Tv32Sn584Bh067AiBSmR6OKdqB4ImAJ7aDlr1N5sDsVSPWdYJWwqOXSNTi9w=="}]},"_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-fixed_0.20.0-canary.5937f468.0_1604523975413_0.1573235330964149"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.a9bafaee.0","@material/top-app-bar":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/MTIcVGS+ieyqQU82oVZ7Nd0aHGGXe/UiFJB05VmtFFNaK24IoH3dVLQZlh8cx1gR4TV1LYeVisBlU9VyfchWQ==","shasum":"3fecfc3e2a188b813a9f3515ee394b02874ec97a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.a9bafaee.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH0uCRA9TVsSAnZWagAAAd8QAKPdmvD8irN+Vx91ImH1\nr1OWC8p4N1PXaOCuSyxFE3J8HDqwwSl+Qj2S/k/d9/x+P9M38BfmuvJV5iza\n4FSw+dvSwQN8xwrrKVzobXziJiBLE88+Qx03/VQpRrJUY7cg8JjqjzSGjVyT\nL1eMdPLfVWclFBptatfeRenRszHr17Xw+YUBtaml1IATU6neqbijrXEPMxR5\n/OtFkTuUQ4pwQpjNaHnCkO0TadyCVmgS9rpLjqpf95xWZ3ruoa2MpllttLoj\n5O/ZnyfiDHLOqXc7T7PlZ7CrpsKnl2ASqbNSlzwcPfJaz2T1Hp1dbp7DBVCw\nuxd8vH3EALHCx2qmyIat0LGYdaa0dHc+w5petoZTDeAR4d63spD7SVc7glf8\nsdkLHRIV9az+Nuv+XXWLJmxYT/MCTt1vTivgLCGgtV/QDO2SZjqJef16BxcB\nXPkx3UiPkfHvU/XwAkGFm2cpHWkm/lEJv8Bw3dDdmUiFDDDNxupX3qZ5m/sO\nab3ceB+sobnEPdR0i9Sym3cYp3VIHEzSs6JfFrQq4WFVikLAPiOjADFJhXA0\n1CPl233FjS1E0lmaRPKrgFplpbYzEDsf+R2SzqaXqbyvVasvWXM+pbX7FBl0\nLO3srSVEGvKIbMMzRjTV9kK/BUfJOptdlhf7rgZz2WCeOjSIyYgvPlfOZ8kc\nbS+0\r\n=q+2n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyh0s/pfVUWGVHmPpmt0MKAeORIPmUbwKu0s4soFtwzwIhAJeo6J0zs91ITUjeapMHvlpp7B9oRWQfnj+eZAXa016D"}]},"_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-fixed_0.20.0-canary.a9bafaee.0_1604615469984_0.6224287493648999"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.184861ee.0","@material/top-app-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ekjt0R9UVp+Cqf8vud54+m/qAR4gyxGRrND/vuKloGO0X9OKXLswHj+NOYtHVMaOwhZjHX8upYku1ZuygCTOzA==","shasum":"6871fbd5e6dad5382830456ed257e86e2436cd11","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.184861ee.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpexsCRA9TVsSAnZWagAAIbUP/2Ye7ITGW0XzuD64yagh\nXKLvLXijpVJ7sRx1ZGbcKb5OYz7xyV4++fSp9GewGxZFOVLn7xMTsSHoXlUc\ndLHuMk+ja0Uzum/A2zlo6owJVVkpL0xjY3w00vAcirwg4nc4McjGwxqpqLr8\nlzkcQkAoIWWCXPdbAYBhICN6TTognbS5mdA4vdcO7XQcYI6e4TrmqDQ21FQD\n2X29X3ylEBetm2Dmxv31EY4iaOYmyrozfVqOdMt4wbHvLFZ5M0BOfUFZgTU9\nBTuRjTg3BhY9iXR0l8Xrp2c6b8/cdt4O561/l1cq9cv97GShd+zhYyQFW0EO\nhFwxw6foS0nVB36V9erm8IafM6K4WqRxhLUrTJV5sJpNy0fe/HA1zVhsYhKQ\nF/je3RhTz/96jLAKzdP6wsQe0b2L2QLbuOxrvYqg276Hw/Zcsekwx97ibQ29\ncwVqnhq5E1W3syrLKnZSLF/MzqK05w6Y+2WcNL/9x8NmcfCbKznETVFvAM/0\n1g12Af8rGC4hd/lX09jjv7VmBtNMH+NVpmS3z/y49Q+9Lhka0SdMw6kJq46W\n1UtUS4+ce4TmssLv/02MeDdjjwKe/HKGgGSiwxSKS1hJ1rYhp3ZkySdN4dX9\nZ3+62eS/VKgFXhiUrvoV6p6XDJFOxaWvRAhCDVUM/XqK54fjJSiyBSDyLTu6\nNPMs\r\n=vbkf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC+e+1UhTBXeroGmrHdKVzQVzuQ+rZPAklReceim6j/VAiEAgXPEaiznpO7NGTT+QXBQDvGnHxdeaeA048aQEprE1q8="}]},"_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-fixed_0.20.0-canary.184861ee.0_1604709484208_0.02155166955089327"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.6c6ae2d6.0","@material/top-app-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-181wmW+RTjsI41N5sVUPOKIiUiyVWYhYCw8W7Aki2TZVPUPmcLbna45LqDb0TNcwxryhijQv59Dt2LwaqCV08w==","shasum":"807b194f496f90a3608e84d000e41ed0d48f18f6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT7HCRA9TVsSAnZWagAAjvYQAJEPYUnL3iycMwO4Z9eN\nQ1ikZV08LYcLSH4HociIc0KqU+hOvlm+e63jbYUfPfQ5qeKGnict17p2/7Wb\n+anDh9knBdJ77HlbQ9N3qq3oF2Od6Gofc4/rML2op+zkRNkhw5xlPqFiCOyA\nO15vwsyVg68FAwgn5oYF8KO/kf7EEW/ZPI6lGxp6rp3PanXsEWkLqeAWrQeh\nIwxn6YYrN4ePB0aQDfUHj02nkLevvjS5fbeNKW9f8Lqmb+GzLuKk3MSFvDXc\naBu2yIVf6eni7aWJOLeWEI0lHNlPB4eKy53LQqQIMpdaWWAd+IuOXRu07VP2\nVVP2uJ5GjKC2XToLD6bxXPpXf9A0rh8guT370R0fTgChXCqqJrCyA1A5ErV5\n+xFiKKBQAjoRbSPsBbQsBIcCQsCSTouiAYKWqq2VD0VTJjKdBwRkpG/BENJo\n9ae0hNME0zIk3CvDpZHdaqZWneySXqx1857aF3YUTmzgPH5Z+q7cipv3fJwf\nSUEPMlSSgKyXwWU2W82VtgWEifr/j3hIe0Ff796XP2/PSMybvLUMIK+B1RqN\nQeoIMlty3ijRl83AKlTfNTIEhWOdTqlcF3EL1Sy567buIBrq70N+rAuYbU+h\n4wif3XqgwU/B6J+h8+HiDixuZzSIbF0RGzHWLxTbPTeCiy5yXB/ubFZR2bnM\nfKvv\r\n=5vwC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAK+Spzh6o7DMqQxn0dSHdOTfxcHlIavNMQLCzNIVAedAiEAwf/N1+29ZEPwEjide/i3YJCvYKqLnt3yxDZOP5PeyKY="}]},"_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-fixed_0.20.0-canary.6c6ae2d6.0_1604927175168_0.2704799223115133"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.ea2aa477.0","@material/top-app-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2qa0Wmh1di/pbdsqwc9BcGyADbp9pyDeJKKhxVQjSJ3v52ZUd5kIo6lGKasagVejPBFEqc/YuNosv5YVFKJMxQ==","shasum":"748779363035ed76d0359a1f08a6d9112a716701","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.ea2aa477.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqdecCRA9TVsSAnZWagAAgiQP/A2La/Ru1HTJ7i2SxAZx\niJWKcCoM72YS1WLOW6Oaa7/Wc3d/3OyUeCNZ9pQPC5t2C0RTrpbiU9EbuRlC\nXjMPNQqYpYfK0MyZXa4zKlpWdIQG69ytelvWRIKEy5NVt2xmh7Btgn/oLGpd\nqUlag5rXf1bcd0ginZ2hye+UbLW1uFPvRbWnvt5TRcBwfKJhGJNdvIk0RWlJ\n7agKEBMRG2SHKllIV/o+jYsdYFTOuwO3jjmxLtUxV0tgjOO4r830O7loEy/y\nN1IhtP/D2Odz3ZsdS2Vs+aQKKbIAAhZVF9m+X9dxvZQ0WKKTDkXuTs5Sldi5\nLR9em++USXshZqreAjcLYIg4nZ7iZab0dM0Ly3h3dERl0ZxI4PBWdpjFRZ75\nRkrVh423Q5hUZUneItIH5bovu0vTply0PqrIBEeYBcwowITGziC5xcsaPxmq\nkGCmUeby0uWxJoSMSBXBUGQ1xJcgJ7mn2kN6fSZ5H305rh8l0l5f7XgwFrzi\nsJkfjI1oTPw2MBU1seqiARSbeDk+e3Tz62yiohRkitFnALq7ZglxFXt7rhlf\nA8mnPFQE33lnRlCoTz5ri8syG/Wq8XUHdGwLp9EbauAoYdTO2Fsk4jCyG78d\nU+MB4qPeo9h9EMe3zGKjBIHIKru8qPSPMmBIu0j4eu7VHLxVS4yrf+nAhPk5\nL+ue\r\n=YxBH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGfituRd5UZVm7Uy2yIZTwp8Me3DsVOdzaV8R2u8C7lnAiA04TkHpXMDypL3guU1Qhytn4zYYfd6dPhT/3ChA/LLmA=="}]},"_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-fixed_0.20.0-canary.ea2aa477.0_1604966299860_0.4127924144428916"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.a2c088dc.0","@material/top-app-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UXejDY3k1wA0JAWUHLfY1erL3EAXcjT7izHrr6Vpj5jmjb+8ZYW2Ca6a0n3oVJ/LxJGqBjj/H1yCyACo/egDuQ==","shasum":"5462c48054999ba7f2daad889f0e619363f860d9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.a2c088dc.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqKaCRA9TVsSAnZWagAAQWoP/1OaSry8vg6P2HOGCa86\n5d07sKQwkS6eu9WRj1GYWqANW6c64Zqek7rtkAvDJIHBLKgN+06Uv8HwV5US\nNA8lO+UAQwdiNPhpdpNXniZk9TDF5izNZfuRUz+pNQALVu6Kx7FQK9zGF4tn\n1hn3oxPtnC7ys6+GQ7Kx96MZGmuhmR3zgLxxW78WPXDiE/LuSjTIVcCXebPX\nuZo1jrj6Q8pfxXQH9xDVpsYxUxvi4agtIbtTQJppZWlXomlBKIQtPE3AdDs8\noFkhcLSdzKRjq57h0OAdqPgiTZkFXQZ3kTGTuW+cqdJr1qwR+nJiBRz9w0gB\n4HaznZ61CYhQwVqL5QQUOIZZNohljIuN8spBTvZu0XmhUnpKyLpQI85F5WDs\nwYgQF/vwya686Ye/DkXB3rnABFIuyHZcMucx/T5N+dfRUnVauZZ4q5lR/yjO\nehyRAp0sAgi1F9OPpmWjNTruC81LnmM7gY4KImhk1q56BRxR6dye8wHaNM/T\nFHYp/W565MNKLvNjmcWkwU9YViueIY3x8qKc/sZU0WesHja1n3KI792+DppU\nFShPY4vw4Bp8jAhocJd8PEAAtitQDZnLtH9ozFtNjC56rsFYuURYemZd6VBW\nCvHB0EEnNMcsbKmDU7TlKAwASQn8lXyYMcPqyFgFN8Xcz3TxhKHBKQ5pDMtx\nA2qv\r\n=1nq4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBewCB1qcc+MmNeFLTHyzDvu27oedfN77nq+XT8pmn/wIhAIvdHo7BVnBL0cak8s9C/WmnW8wnUJYI6UbuxKHhe/SR"}]},"_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-fixed_0.20.0-canary.a2c088dc.0_1605018265984_0.2822681699706384"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.b04d71d4.0","@material/top-app-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-yu00ZtOGlD0cWW7oCBz4JeEO8y6TWKSN46wcfFTSlgMwQ6knRGyu9Z/Kq/GJJqI45GJh21aJ3q5fI/uTWXKkZg==","shasum":"2bd5eda5bd12e1926ddc595ea1e692271588e010","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.b04d71d4.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRGPCRA9TVsSAnZWagAAVSoP/ifW68OSgcodIieHso5b\nIZnq02P+JBkFPmrDjr2qL/lk22Ny8ZvY+kfiY+NEp4crdo/PfkfDzj6JeXAJ\nm0MGXcwfJyj0Nyq/WcaJNp1XhEPGB+afkMRLCXoI8ZqkiyzmD1Ef7uVIgj2T\nZgSl6vlHfr40Al80gM6thqPTfiHs1RNvWOclrl6DM63NPhhbE//CwWoimJoq\ncN0l1dvB4Pi0idazpaEQJcRAalNJEZIBLRr9brS8i3tBJs9QEixDSbep7ab2\nJKgW3bVAfq6oMpex/k1YsMepC7Y2MskNxNeZrhfZOcg4O2fPXP/zWNV1GO9y\nCR7i1JnpD19BemppyRlhQhWMZQZsMIw+hEL0EgUtOkUSuBLLgoaWZJJyKY/g\n8mvjR8X7egSrRxiP66/yJ/ujFjTgs4kEhOsxQJdA6UoSaNaaZtCX2+6S1uGw\n9sxnIrg8sHhwLOFr39sb6aY3jMR5s2ADcp2MLfGdFJZ+APF2lKyILYhD3czH\nd5QqpOFSH35Huhx2P3NnWq9a71lrPdBIKfUOrOpnyrYkPJorP0GLKaMPmUSl\nXxYJjDDvq/dJ/UFBEOKgqHZ9Cjsm073ORHAIfsBb9C3YbCq0UtPF8hE0Peyg\ngQpbT56FjvKK8FgAoLZmToNNyuEvyxHQG2aFOmX6sXrh+FNIp2JZ6ioI7jqK\nhyj9\r\n=QMWb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3uANHielJn5XGZgC1Jd6Gwk45HoEoiRin8hLwNFKaKgIgdhZK/6uy4U8PcwS7DYB3B0At4msSuYesi4CFdV6qcu8="}]},"_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-fixed_0.20.0-canary.b04d71d4.0_1605177742575_0.5876192689354776"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.2c553352.0","@material/top-app-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-XiDzpXA3rJ9Q1OQr5y5sXVw+TfRaxWT/DWh2IH6fQRbD/9xN5HnuYJlqhahWifa4axIPZ5kv7G44OYafV/eFXw==","shasum":"aa9d5b8ae65fb0ead55a02d4d7ad4fd4eb043708","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.2c553352.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbp4CRA9TVsSAnZWagAAMpYQAKQjpO3WVLB+FjA8+xlF\n/tdcjMVktIoA6wu7QKut6J0m7kMxmYG0JsnhHdcvVGIjA/158ci+27+38q+e\ngl/nEvx3kJHXXSXpKWwIgvTkcR9jRjywLQmUn739E3nJu4taSEhiRIwHSZcO\naP2Gbbgr8V+pxEr2sgNqCV2YY/SHbCkRx1mx/yGz60EqJAnabWdpiabluu8f\naD6UTtqRETkoPaVNB6QqQnTx9Rxlq0dw1IH7Xthx7YQbss7HfFqqvJPVnqBf\na1uC7mKGlfgCyYcrKqpdM3VznYSe6hZLyek5IWk4nHzs9D+jWbeYFYfEri2i\nXVRoXIbkceToZSaFEX41r/2cW0z4B1XVTtdpqmTPTKV9dOzAYsopCiDq6Ccq\nDpoNQJB4MqpcqyPth+1x62h1jdFNlDJXKhylIr2kQpjlK6Xp6/DuYrdoOayX\n1Bwy/4jgrGttjb+U7D+KNfBI6vpIJfOH/GjyWwUdmHbvy72AaXxwcbDG+Aie\nBYTLYQpm5xSZ0IUv9sRggUgOsvLzhSvMG/NIhYqPH1aYDBf5eo0yuF1EcOeZ\nCcpfD30z3rQk50OIzwKB5PPjR5m5AYV8u5Eri/ZEfpC+RSuEvWy4CSEq5zse\n/qLkIoiGpBbEBKertpdcHXGuR3ntAGiUH42VAMVeBgpzRr0n7ZbNh++vMOpy\n5t+S\r\n=pOFN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG72+5ijCUUEIsiHO/BlvcGxdqeGlV0FavTn8D1TWAz7AiA2GzvrDJV9HvqVXjhW8g2WwVACXWMYYavW1yCdV5HKAw=="}]},"_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-fixed_0.20.0-canary.2c553352.0_1605220984366_0.3559058075733328"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.6560d19a.0","@material/top-app-bar":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-tJqyAxah08tddPtCGUO24aQXU4Sfc3PpmKGLfJ2EuVUuDKhzyqIZ+32g8p9Ob8lB1SvJS0Q4DzY+qXwl+cA7Ww==","shasum":"bbdd3e65ee01f47777ca72585b3f9b674fae7d7a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.6560d19a.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvEvCRA9TVsSAnZWagAAqf4P/iXaVBV/DArKoP4akfmj\n7nOg5dn3qA/8Ce22drfF1FBjyswMKRquagGxzq0fp6i9niMS4Fpqh9pjVvo8\nWHtJsAo52UbPCnNYzDOWeG5X0DIvDYVchzVJRhlGlovSVszGsFGVgAwe2pSN\nsK1TKR0OONLqICmODev/Ca2IEPQhPa03tePrIU/YfIlK5PazOF6WiLnTeXxB\nIbpTvlioklwrkS5zLSM8Pkfj2d/AGqaqQkMX+dg1NEaLoY7estmeqbJc3J9A\nOvfIaIuVgNxdTY1MyUlkLitcA6N20xI4rgn9KUTpmgUmnCBpafuhFJa3H271\nBkIvcplhDgg30xx0aMvJi8vYxYiblupjB6pO7uHhbk6do6tUkSjbwyatyg0g\nU3g2pCr9WD0FV1PK5D6KvHejaoNxGioW8P8F7XLrLEltyLc5bkT65nZbyOxQ\nwnV3uBHgWgn57xcq8Rt9K8b2lSqrwfWv5+x05KIiKRqsww7e4UvVNO12WrI0\nkVkSSuxMNnY03k24RhKSY7zjsoIomhhd7yQtp4rtu42IgOoWB9xhOO+Sja8I\nm1+PwsRXi3KLwQn0bEIU4Yqtz2CVbD8rRsXp30STTTfskBmfUC9jotKcdfgL\n9sczOTwkIQNWijnIadj7UqAMHZmpm8Vs6OmJJc//MqtjnXR7gz7GqbeHKhVY\nJ5Rk\r\n=6Jz3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE+B+pkn3Gi77BYln2EVJTCMfnclRvw/VYus9hs5fGx8AiEA8M3BQqXMbShVXdKTt/03DdaVE7MJ9u37oRm1zKLixOA="}]},"_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-fixed_0.20.0-canary.6560d19a.0_1605300526859_0.4577559546556347"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.a28d5ec3.0","@material/top-app-bar":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ksQ0cRpzF+E7Qr8N9+3eMQJJKL+OGIV9RSbomphIEl5p+/F1hbMsBJHHsI66SC90UZ9x3ircMB3i3ip+PFVsQg==","shasum":"64fe295ae3d61ceb74279e99d021cb1c9d8b039c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.a28d5ec3.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+spCRA9TVsSAnZWagAAAIIP/ihOt9WM8j8/raQOydPm\nS+BWLU87gwJq1byFTzRTdFpu14osgGP0+nOzcPPbFTzvIA1m/nr+Abv/gS+n\nZwUO6Ciz9WL6RcCf700RgQnoHBUv6R651qOuOdqqi//y/32iozMe3UYej+JF\nF4QWRJSugMpos6fIS3iwBtW2reE+FfbdNPcdSCqcY7YdXBNOSTqHOemllfVw\nrEjoKv5jztI2a+b9ZlRzxcHIb/sJGZIQiR0/GlxT9i1fmtLmYaIm64W5VTQF\nEEbr4L8mG3qbYRs2WColR7SP/QDGJx28/9d3HGWKzA8qPU9H9dXl4OD9X+8p\n0VgT0hyZeTeW8y7tEwD8w1llhiQLXhpjMdcXXFgF8DyK5cgUJab8czZOCury\ni9phV88Q9x+y3tvw2xS5jJeu9sVVJUnBVH/UqNwhJnn9LiFploSQZRXM4q6B\nZ5qQz1wexENwADBHb7G3bFTC+xeq7IRJNeVxMzdsyOy2ppKeVYKSt9nYtW89\nHrV2VhiX+Svm+W9/NJTKMMsYRbPblXgm7FgLN3XGrPet0tg5q/a6e91LmHYI\nR/N3O57QWfPf+wJq4FjEXVidHNV9HkTAcFuLeuRvLYFYdXV7NKlcbiP2FBSr\noxkmCWM6WhCJ/LNBLu/8T71yM8hVPU0oL5skATmZG4MhfmPtV0orZNViVAuw\n+ldu\r\n=bEKt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGW5yGK6vdCt11f8YvdlpPpHk1szjJ9FAgbpiFTjp6XcAiEA7CP2bd5u8WhdT8nk89vPFjYHXjW9Dq12qeIeKPnUiG8="}]},"_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-fixed_0.20.0-canary.a28d5ec3.0_1605626665100_0.2999634271094451"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.03e7e778.0","@material/top-app-bar":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jhcTJTmcNrM64diGaE8Y8KVgxo4PFv0wn56YE05ykEJz1Y2KhU9QfzcEOXTGKSsNE4v1BHT5qpJlsH9n44pW1Q==","shasum":"bdba61ddd5f2dedeff67febd556c14aaf85e07b0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.03e7e778.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCPsCRA9TVsSAnZWagAAOO0P/jpD0P6FzkgNj4E8qbrq\nGIEgXxa+74C9otHw5atCPzzqClujmtp1yoY48CYDXiLh4umCiMYEsIlb+HPq\n1Vxae5xxicPQCYxVZTzjE9pZA3L9MtkVE4qnie2VkLB2YiehssdUHBLvthPe\np1kTy83riU9RHqmW0FePsmbmK196doZxvJWnqO+6smB8JCYi1iH3FhwR1R8o\nMONUaD8//udWSgAkUytsoOtL+sc8x0GUVXKdpAbOPVb3dFVyUVt+57h2v546\n/FScnQv/5EKyLF2vWDICsGFO3axBs6gc2T2wBi3nGaOV6sSGejvppQ7vQtam\nhQX4wtt3rq+E5KGTaKjshM10CIx4sMNfN0PsIVhC0wBx+oqfSh1TF0iWL9oT\nAU3xYqPlpdu5fvquyJjZkIw7KRYNo18LAVNpKPkp4SCty3o7KZCLvomMUZ/x\nkfy50iPOVrHS83ggI/HvodXwkOy0vwrOynBGKjeNHZwY6FKz8BvLJp36hHaK\ntJYWXSfwXfKMjCxQuQtBB53V4b+U9SwLPFprVT5u2+9bgsze3EWJw8umCDDU\nAkv+6nP0t0Femw0gS6/48XFXFi4q3+aIdZi2HUlzjpqqv/ECNcM7CRdeFnX2\nOP0FbJc9fI7tihY9zkw+p7LL9ZnPfPAaxLWb3d6ypMSDpkG3Fi0j/0ypEPnN\nGhpr\r\n=Am0s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCHyhuNrBnf85+ehwLbTHn5qbxZi6KY7/XY9OcKkFpIUwCIDvNfOreuOjlmMXRIVZd/kj2KOvabOcrvvy0d3d23ftj"}]},"_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-fixed_0.20.0-canary.03e7e778.0_1605641195980_0.5603464177185828"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.ac8ed597.0","@material/top-app-bar":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-qfAySLPY3AZFU60c0pNUKq1F5w3nqwwEJI4jO8KSGWdggudrTqD17YG/T2iNA/Bp5UO06T7I1zIVnPM5eVrDQA==","shasum":"46b86b7bc35aed2e2e0009e33854ad13cf1ed80c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.ac8ed597.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftEq7CRA9TVsSAnZWagAAxd0P/icuksATc9SfU0BOwxMo\n/El3/G/dblhR0Jl4crLQy6KZqK5VuRDkdNphotxDI8VNIUejiScZENxGOSUH\nl64b55XIK/x8+oGNtS/vaAho2A7inzJ5IPfnE1Pd+vxJ1wWOXtWIer4QyHOV\nsTt3NG1EIXR+4+MC1/3GeM/jMwkeqZ3Dj3iLFHkl5xlQkbP5ToOBeGvBjQhC\nhW0C414MKYOfFKdj164XGCsVRxrlUZaxLoA6yF8UvkYi/1/zRgJzss4ebhUS\nJrqjMx9VknW11ZaCEIU3G1UQpcYBuGMqaIWs+6YQsHu2JmTkB5kAfnIRhc7/\n2+xuG4jSrgxFrVGLoLric5vJK9fv4yz/fana5sCIZeLD0Rrnt8gFhNOG6aS5\nlIJVfUgnevOsrO4pJMlDRGzULlkVPIUaZY8v6cXOMKVFy5HvzjwXIay6zfTN\nAyB6RJOYagshCapW2NU0ojoDXMYjMOwI7MB7KvmE3nhh3D1T1Y2MqkQWdAzK\nAuFv4tnNfzAMrDd+Mw234fgslMu6ppS1k4KSHX+dh5Dqyh5abOAXQUNTd53d\nSplciu/UOMBW+ONNdw3pBJ0w3Rwj4hcqkA+4WdsXRZzbmOQ2v9MAt4QddDKA\nVS7PpVpPLuTI7QCr0rBam7akvep4CQ4v3HhyO5G5FjaXd/RTBRFgceJEu8C4\nCb6h\r\n=uwnL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDnbW+S92sWtTFh2EzvJhiCkxdVeB88lLTYGrbpBIVYIAiEA6vFvBkX/VF2MLvy8X9Y02UTybglihzhR8RJJhmgDtnY="}]},"_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-fixed_0.20.0-canary.ac8ed597.0_1605651130653_0.2791231080975358"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.b6a60f60.0","@material/top-app-bar":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-4n+APFT3o57GnUM4SyUOh6kpB+KARDPRw++ffKc3Bb85rdBZolRZZXRFXVfvzVUCUP8iDp60YKphHqinVCkYAA==","shasum":"e5ebde2d41e8a015747e91bb5594c778d8fdbdab","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.b6a60f60.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFQxCRA9TVsSAnZWagAAuPcP/2F7+p73ejX/K3zAhbg4\nL6c5uRD5LZqCsvI1vGBA+ULcDD8r/JNnTcjNVgIbMXaRWUFUQLk/9ejNwFRr\nkVCMHHg3Tx0jpPNIHncelfgdFCqn/82+SC81MaKzLkCJsRbIdNmKA6+mSZUa\n0fS21aa2Y/Eqo3sHrvDokjEcz3JG1TJbx1qLeLQ+jaU/afbXW7F+erJp4dBs\ngqkNbX1KHjw62V3/BJmUw2cZwj+oBPQjm2kzg5T+WnO5jGCPEAdBLZR22JVz\nNOj2R5Cr7vCSjswFt23XG0liO4k57pJr3SuSMzdYIJowUBpLWS6uUlZRFdmP\nNSirGWdO7Y/PulQxpWFwAZ4KKYXeafrH861sbjC+5IIW8Z1WuyI9XYHIjMuY\npx8OQAxf6pLIhjPBdc3+GMWjaKtVRJq8WUt3zqF8Y9JCYvMBK1tSqWFRDzaF\nfafqFRZKzsIrOONdLCKqfQE9m9PkUcygQ7AFq2jGw7ibzCAo7aejHeV96QqU\nIu2yEMK1/aAFQPqzLtuqshqcuTVQ6Vm03OP6iNYd3oP54LqfmvZqIejrkhnw\nkR4h73vEAnsXvWJ+vY1Mi3h2dg3P12qMja2FSr6Vaf7FDDqgySa2mF+TzzWB\n5twj2Q3oNwSlTmIoOP+X7fPHTN+9EG0iMdKpQ/SRgfHv+ywNvsQleZEtXEKI\n+Vzf\r\n=ytcF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvfRyHVsQ+wdyyi7mSya53IJjS6kFikgkoNW5xv8hGHgIhAJepEUTsePW2gnpTz7E9Qkbb6tEbBfICRdaLOYx3ofvE"}]},"_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-fixed_0.20.0-canary.b6a60f60.0_1605653553481_0.38195407351622035"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.71cc24fb.0","@material/top-app-bar":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-N8880ClsqWXIS+JL0xpQ8CPN2wTMlZugRcMGXSiGaGgUjL6OhZtKW3PXk4OldQAcbtUnfVPnSoixxh13C+vYiA==","shasum":"16394c002d6dba49ae09be80157522f5db744aac","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.71cc24fb.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFnvCRA9TVsSAnZWagAAFKIP/0xD+BdztuYIBJ0ebmjo\nK2h0E0NeWCzbjQjoHpHF59clEKK6RjRZ777TJOx2X1Xt3oouIG5g3i2gEjjH\npAiX/8qPsDI8WfSnEHA4Chou5+IzSkSuQIs7eTMswFiF8M8C/h7zz3w5/Dbg\n5CymRjSLzS39txMxKbVfR/R71pRpZpQHGvNUu5DSa74TBwqyuogruYRozDyQ\npUOtAzpfwrQAfYAk6CABinnESwnr+lyBkl8PyT01o2RZ8BqZNsP9S4Pf2L/w\nBrtME7caNtIY7x/YMHLKPDniu6fjZrHMzpb9VGMvzzl1nxHyYOjcWNHzhnBO\nGlL7nFvx8iSJz+1QEjJJChJpPxMza3AqL+tUW7KSTXRzOjfAQURBpZ/6lx0S\nTEK+pSyhXrn/W6R2IxCBV3dM3XvMoDQJsiX2oxCsVP/0vL4PpvIX+Jjr2jc/\neRJ6NnVvoxS/95EMstyS5FI6afCTb1Co8QYb1NGtelrMuKqj5nhfUsYgPIDJ\nUVo8dkDZuXk19p6HVmAxzG5yreXTuJsru89opB1atQObfldYtthQbMncXzxO\nMPkWvto4/HwiNQkCa9W+eVhbcS60POQgm5AbX5paIB/ozHCaeikcQp6crC20\ngzniJb4sjx3Z/xAGzXx2QgOD27VwXPXyIgze5TdpamzahPvlvQ1FInWf3Y3v\nkMIV\r\n=z2E8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmc3okQHLb4zPR7pTwoIgBGBPrtccT4hNSZzcgTCAJjAIgJtgG9r8Ozo+KcDjYZD2yECKdQiUWOM9PMLa9OCMqT54="}]},"_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-fixed_0.20.0-canary.71cc24fb.0_1605655023302_0.4918041523515009"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.761027ff.0","@material/top-app-bar":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-kJGGshX6sbIFcnPBehrUgQRcKtwJ91zUFQppBc2wTN1K3gMfDCoy2Bc5DUBC+eXv9tiCpINrlTitC0LQULfV4A==","shasum":"4d39f78155ca84bed105486b82ea36a44a084a8f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.761027ff.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZzHCRA9TVsSAnZWagAAVIkP/0WEFaL+SHWlNgKeTTH9\nxSvcKfatUDTJfrVbsNwF+TGjTWV+Y4Ee8/TEy8QRZAPq5jVBjWFjkJDS8lrO\nY7SOh+up1zEwQkDyVpY0K6lzpBOQq/O7GoYVf4Tewx6i2MF8HD0LT4coBG2o\nb3P1vqKxO94qWZRqZN22cLmqUf8UWgXLv9SSaZU6nKYfxZPXg/dxVratMSHA\n+88zoWU1DBeT2QkSNjruRCwF/VGB/5yuwJCGM+1+CbtUyqbIzFV6qW9TruxP\nEJps7TEFlNZGN5i/tk5i0zbKzdIe0TBv4Ds+Z324158/3zGTcgJIJwLFnLWH\nit4OwvpdGqhMVEACIjEqJMaweNEWcB3QIuqFBr+UMdeQUbKgfdYnXmJthLb8\n/fzbVXysAxwX/UBE4KN8cz5TPC/0rOciFJyOytrIvHR1osxXYURqO5cV84ur\nsr4TmrgdW4tRBTAywN/Tw9bZF2MlfG7LkLOCAU9U3hc/ABsSR8zXZR1hSqK1\nZE5PRt/F/BOiRJeJNbaBm+uyidxt74J6Y6U9KBXdvUPBqzL6+TG62ChMDWCX\nctZJTomM3WUdX9uDZKZg+MGikEqUY73OFtm2QTOClPahzaleGo4zJXBwzfdY\nJ1bldBHPX7VpbEp21Gtp/+/pLHa7xphlmExrP0o2HOPYLhsSUk1D6/nbrgR/\n3+5b\r\n=KJFc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHer/BeXPnS1rifkLaBYHhTtus+/3mYAi+rvfF8lDZvOAiAmiSttyZN6ZnBc+L838hxaiAk5Bk4RCGB6yo/MEu/caQ=="}]},"_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-fixed_0.20.0-canary.761027ff.0_1605737670987_0.27049297324498256"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.dc93d04c.0","@material/top-app-bar":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-9KSNd51paLIHSI+ZuP1CuzTPgNgpJc51BHmVQc7rH8mAgUlsngaBgfWXdfuVjwmCRU1urSE9A7y7d2aaO+cKPg==","shasum":"e8999243d168ea006c2e0cffabb308a3ab65f485","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.dc93d04c.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ4eCRA9TVsSAnZWagAAIuEQAIG0QVc5EIblPQwDXfy0\ngoIiS9UVerM2McAB0Oj7Zdk7v69aRlx7xo/VwEHM48tGruAmb113/dAWMFp9\nBsRog9ZvefxEvnaLf9uklfwEodgqCTRi2dTJ1diB9+OP26HQPb3V07y6t/MY\nXRseStt0Nk7hszKMp4qib/NjpqsZ/JQ6oe/LqWSDjBXWN5XPukCV3ZANkhTY\npZHqMsRpnEdDDHWicK+OBmFVfydgp9IKCPoYu7CHYfQRdQGI2NDYENtNxlpo\nbPw2ePbAsJJRYsHNZui45Te1lAUqtE/0TmRlPRQUDf0hcnEJlF/ilu76nKdH\ntEKxs7++obELNuDdkUVa77s1YYtcwiYik8dLqytV9uD4D3hl05pijYmKEpzI\ns4odrHVJ2d5PiF8xmn2bUw8+ISMSxdJgGQWtYTsWXHNSli9o3svXnqFNsKft\ndJgugyVbFF8A/sulVD1CPLwn8qUcvaT+chgI/oFREj4WV2D4gTstaXGblgH5\nbXXW2mv200LhfTPnwWvAz8P60y7Dc251gUhuNIeYeyb4vdq5jB2AuEYRMFRE\n0/WMhKDy/gfkpxDmz9RDiiStJ1gqxGci8KClHNSh3Ix4I7ji0TrCZNEe59iy\nGv9efHZMyXnD84EcFiGKK4C1pHWQ+ecwLhLU7KD+EbV5XOkJ/8coRbf32xxE\nBtIW\r\n=x3Sc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpxkMeTf4qOY5TaPFxKIuSrFgO5boibRZd+lcv6tzv4QIhAPQvMq7rdCGuT7dhcfMH9bJ8rexjL82ve2V1LcCoXezt"}]},"_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-fixed_0.20.0-canary.dc93d04c.0_1605738013786_0.6406320854883731"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.4a5d4eeb.0","@material/top-app-bar":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-0LW1Uyru78XtVpkAYlnwq24/UWTamW+B5E0QHsrotdZZxsUzSaU2fhuFcbCmX5QNhMdrPisBHlN1TE8r6pPR8Q==","shasum":"568e6f9a5b33caaf5585ffca2453754dd7a80b80","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftldyCRA9TVsSAnZWagAAtuYQAIi0UPiJsK68yCAIRs1p\nUIPsXgoDaeLHDB3ZGZO4a5Lz1XTYjWr69sRIHXkkjuGO3TKI350I1fHzIHdC\nK+ZsIZUXqwesM7o4cwjLz8hcw5IE9BYL92C5/s7perbWq9hacOs/RVnKtnbY\nnpnVDJ9OUbrDWYnXJPaec+gUA6OE/YIKamfxuhtoHww0FuG3Fxu31kRi9BXh\nOPDzDyR3fc4xSpcMf7j14WNa4knMzi+tpUwhyskVO7jjNPUbwVmoGVjsCWeD\ndFc2smTsBlpi5IgmHWBCblxO54XH0KEJ8vdBMzKZfTK+WV+VeVGHYpc7VX7T\nGyBUwWf6QTKFViAwhReHXjaHeYReJWZ6bVlwa+g0fwlhDgyVhSoOmGSzahJa\njcU1B132lKZ1jGidKkTHCr/f9ppUtBeqWij1r49DX/UA+V4XYRClbQHN0eww\ngxA6AOgK4acdO6LeYiLrjitrUt2h5qAoHJ8MluMXrjscODVsv+3Byk3Dk7Mg\nSBVOUqrPgq6kImbNlHYOvOu6s/aUbscXkhZHYiURBBrTlGHSVvsBgs1ArabN\nh6rmCehGE2HmPF48d1ahL0/RxrKkcsZFfR+j0pA4Hg/iaa639n6KS1ALLkk1\nk+mLyYpGu2G8LIHiO/FiKOqWhLuQSv2lFTOepW1MFRS7SSM02Hg/iIpHSd8T\nGwec\r\n=QdUN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHOsXCNAjl34FS6VfSbJWuZhTUOHEt/VMatORT/GkHvzAiEAkeYgUO8IQtBBao+rvuI0yRIalAdq36uiYOfG6Ga/80U="}]},"_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-fixed_0.20.0-canary.4a5d4eeb.0_1605785457774_0.8397508942354532"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.bd176a15.0","@material/top-app-bar":"=9.0.0-canary.30c11bfc2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-0Wg/mceDXF/mzJvDQqEpk3qD2RjOZEEsg6OAqT0v7kWZ/ZCmCSwZ9Z9mzpLsOLdDdFJtS/zrdw1XxzrPbXz7HA==","shasum":"0a85e309fdadc4a53a87e5682428d792430bd70d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.bd176a15.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsM5CRA9TVsSAnZWagAAUbEP/3MCcY51Yfl1bqq9S+gJ\nNG7D8kSRAb2CdXUFqzcAJs2+rzs7mlzukcmnsVIKz0xi3jkcsCTvy3LEtRcp\nRxbgdyiCYjAIIBZ3zj8j4w1MEvA9mBy5ILBhywirZvwmw7e+xn9jSdU/5Cpq\nUZGse0imnihoT4LcRRYNBiRf7Oj8IjCwa4QWC/NNc9bGoG5j1g6c0VqtGfJK\ns9YfS7GVyv/b6guUQBczzU/m1oOCl82aeWOMmqtcN7BkSljtmOOOM1Td7AnK\nhFUaZo/DUdCu3xKh9j8CeWaj9cgLTkT/1T91/U7bsAQmB2pX7OPhKpsPa2BJ\nYhGmNKwK+wPEx0Xq1dr0sYXFDEyC78fg4RQQe+gaJBzouJGh3s/OgfKXuKhp\nlYr3RWViZznN5hQocCaW6JxauU2k7ufTaMJPRl7b672crp12Xpx7DkNKxxYP\nru7Q7WSNtv5FgcDyP6+enrUrv1gX/eB6cVqwZ4H1XicvgjkbrUi4E5npGtVj\nIk496evmW0ksBRnla86oAycFGJjGJCmYnsSA9whGfBguhIdwV91WefuzzA5E\nruvtbxCtkJJp+98+qVjXrrEE4s49Nrhzbjl79rsa0Ojxw4p/2WS1MvObAkwr\nR16QupJ+/NwvE/SwLd1VaHsOsGJCVNK4us8YDG5a3+WhfjJz1u3nBVUjuuji\ngxtN\r\n=eQkM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYkbApnc9wm+YHpWvG6ZM6v7SWBSzvRp5tXmjq4BJ6oAiBZDXhtbvuHDWPJd0gCbrS2Gkyzu+QJXOvSO5X1mVrBCg=="}]},"_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-fixed_0.20.0-canary.bd176a15.0_1605813048985_0.9078140272967201"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.e85aa60d.0","@material/top-app-bar":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vMX7Y53K/FqoAZM+aUKfWII+eKmhaw3XaKftFRF3n2eDhdCTkRuT/N175dbppXChQFL5eSvAyA3qcluyIJH6Gg==","shasum":"91aab5967b0bac6da5daef5aba6be65fc8c3d608","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.e85aa60d.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDbBCRA9TVsSAnZWagAAU+8P/3yTWTaIwm/GRoGmZDSI\nwwot9TdGYtAE6RSO8m0IkhNkXmQZUbm9aPxHZItnZK+vlkYkRZgk0onGsbWa\n9olcgdaStjAlbwpmK4gABOc0Uo261v+7NaNMoRxnU2kBl1thuqwVWfO3d40C\nkWOwHLnn1mN6iqNc9MkmjZqB5UffjWrhtCjjiLs91TCbj9IcZjStZmv6tiiq\n4M8XAzIvg/eqe356OdlljYCqRzficlT6P9md4oLXarHDNDUygJUZb6dYEyY2\nJgh/Vk5GvUPGXsKHlO+CzW7j6XZnBLxtAJUNEEdBpAGHINKcM8ULiJkYEK61\nNojDo53sxeZjoQ6gHpBWu4I2P6MaGBZc+hgnErYw2Imlul9EFehpn/d96xxd\n8EoS7XzoKikEDYU+TqOnPZ8+/R2aFB44u5cADJo9MDcDmiIIzmYUJIuvwo81\n1KGb6Q2Vf3ZPKF0CeHuNOMgkAiiIGktJZYVGmrKra6CUz/XKpNzo5lexUYoQ\nU4AbQ4ggDRizRwmRAcGJQlm7O0CcAYkguQTnG1gvzVCAQnRNiAHRTQIxNMvq\n2iScH8urjOuP2BQdvl2MjvlW8oDZxn5XMaxMJNtVkPGvuzqNmmGijpk2v2qY\nUs/AX5j9HbjGFPEYLI599lwUZL//fk7EcAn17CFJwKrQdwu3SPdv7WGOb+0M\nIoBC\r\n=0RmE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHotlXoSE4PuS/qzP6FQRLoU19GKJNjfVI5JJ8Z2/gVnAiEAoUI7H9fNi4g+0gmJUqLD4sxoeYpey/fBNtEAotpACfU="}]},"_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-fixed_0.20.0-canary.e85aa60d.0_1606170305226_0.6966034676750688"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.72092360.0","@material/top-app-bar":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8AIUZ5b8T/gI5YlVgOjqCvG53Iaw6fcaeHEdzIcn11HqHqBVlzfnHZAxrCxLLsPe9UETW5d9BA/VPJxBB2FTjA==","shasum":"b6163fe86045b16b122f495737819c1b26eb7574","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.72092360.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvImXCRA9TVsSAnZWagAAWbwQAJbc/8owQ2N1XMLAe1EI\nFKs/yVD9MYRo82ELzk10Nvk1rgkskE8h8RJ3Jh5PYUxg+7n7mOtVHgn41j6P\nxmD2PQsrPSy+vUCKUM6C0Qbe77QzsyBCLbkbCBmGhtA29rbvOg2kuWsa9kl3\nzeYLImCPYqI+1y6DSPW++W9D4Jr05YMiD9+IdnCNMdKKkUkZYQbDeKNvTjER\nH1pbZ4uxGumLdXVTe+lmwEXDJ3sus2+L3Pz2ysaIGazJtWnI5oFuijB8wAD/\nOItt3SL2EtQH0eIzgHR2pMxXQHm1a/vYtBL6Gan82VKHrXH9A9FcMsaZW3cC\n4rcwm8W+CzQbZzXKCqZ1SiOhNwDLNIALk5n8r6Wv+ck1yGvWnWMLp97a4qPJ\nF6R3Wfe6L6WrBy7YwNE/dhguEmgZIM5q9Lb5Oxp2ocqi/7XxqXKahu/C++dH\nt436WFQa6jIBWNQ2YoS+HpVzbzYjiaQguHANmrF3uMqbB5iMsJvCARoX3TLk\nB+HEd3GxcwlYG+YiD+OQp2PKNmVla+uWRkKGsE9EEg1QAm63nU2/ybNMV1VA\n3+Lsl1ItYFrxZwgQyzeq39If8ZVS+UkxoP6sa9QU7aiV95e6ZJp8WHVnt9kA\nsjP+PJluDlCv/xYZ437L8cWCYLYvWKPvaZ1dHvXX3KIhmAS0hg9a6jvdPCUL\n3fhZ\r\n=njuy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB8h/smeZLQnB5bn61jbltXH8nbs1FVABXB8GP7q/fMRAiAooL7mPzZvkCA8Pdht05P/TtT/M/UhaIBHNZ5tTQ2eEA=="}]},"_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-fixed_0.20.0-canary.72092360.0_1606191511207_0.7401706341022951"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.baf9d39f.0","@material/top-app-bar":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-OSWLEOY46obcqOnlBZPeWFqJyPBctnoYQn6yLmk4IwV9kfW9XVm+jibtcp9FGb67fwM/5/moh4NJcu/Dp2sUTg==","shasum":"f490adf21df77e575d17ed6232aede69c4b9e70c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.baf9d39f.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtE7CRA9TVsSAnZWagAAfigP/26eTP0gEbeVDq35/8v7\n9LKJ4glpJpvzRRr5RjTh2kPC+R5mOPlZc7Yj5X4g2recxMk/oF8lAjifsWwu\nP24sPSZSKNIzt/GMmmIjzIi7ZlU31aQSZ3Spn74qJlXyI+UgHwr/pqRD9Ebu\nhWnNwhOY5x4p66CJhhegnvwgtB5nuwn3r2BToCSY8pVVdNU80XHc5XDhbxhv\nGOR3fbF3DThz8l10j0QDmAfq3MsC+DdkNMyOIPithClscmMtCt83bTiOoZPi\nGhZZ15XYgGAqTYZ8uqwV3fgC13krj8Z5LsArhsX5ZdsrB6A4fjEIQnnUFguY\neE4ONJKU7Gl8PH0yTxok6ReyHG1x+MSG8rW1cnn+NR8uKXxOXatyB8w3I/Al\nZ2Cv2F4uQbDm10jxoN2zLpl0siWZutIfPgyYKN2D4auzO9c1yxYIHxSxxr/S\n39nmFob+rh0AlLKqPxNGcGhSA5WmSvy0pSetIznAVwu8OjyMeVEsXRHKXJFn\nWUjsg7+KbMpS0NT/geMsb1QeHkUuungJW63CjsVF9QB5GXlV7flG3xh8HtA+\nufPZMr+Xti5wt8FwB2rfHsNX6GhYlG7Z7Vzg+qkGNvSVtDQz6sxXJ90xbofP\nnPVzBY3JIrRvIBpIq2n7n3JkeKvN15ESpQZMIuZ3M+sesGon2JAMuwYbcN4M\nl0HO\r\n=zhIu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFVGCvJw4PNIhV41yR6b7ZD9Wbxeqhc4j1GWunrAKGxTAiBSZ1oGVdKGmIpD548GSvgsr1BE8y0sDtcNRuim4BCnsQ=="}]},"_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-fixed_0.20.0-canary.baf9d39f.0_1606340922923_0.8397149602944818"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.51aab0ad.0","@material/top-app-bar":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-fajXlw1FVKcR+w3tgpSE9nDKu4zAre2OlWCj38C8v4JNaiK4vRLZkeXkrHkcJ6grTUu5aosshBJXpJA/sVGabw==","shasum":"50d3e30a911f033f6454de66b990b231583dae08","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.51aab0ad.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZbiCRA9TVsSAnZWagAAHa4QAJlS+cgtJ8lQ0ESWDH0O\nX/Yr79pmtrOLqX4AxcHAipRSJRZsq6VqK7ZzbFy2VsW3SuD2VObPHbust+OQ\ns2yGPig+nazrnX1488ERY31/sYegaEvtVX0aFQm+0hzLWe5u0etTQ0dnOWwY\ns1DNqiu7RGOoF0hbNWBdpyCC9+doi66mA8OSwlFTzZuhcqMdS7Ep1qPyvmXN\n2RjtoOU8VccCR0DY5ksRASQBEn7qNLQh01/DLVVvgXeJX8LHy0jgrxDPdUld\n3bwk7aSi96W0UZmvaH6mWsaqp7KEcVFk/V5aynqmFV5ekiXItHGluNMPvX+h\nYGvf/tg8eAWu6E9ASTtm52+S3+bopYzndCis6NyAq900QdYVOBW1fVF5qBpy\n+tiVRCgaLO2cT2rTETNVgNPu1c7Wd3kcRnQZfnUbfnfkIwVqFpi+ht2dHJrf\ng1EMDiZdi5aaQbSqeUzHQedhAKkH4tU7DIDeBeu9jxoI+5hiiJMmTfSLD3jr\npYJP2YJ+OykGsjXoOHN7ohF40aBPWb3DJVPH60jKMSnS2yl+aeykmrWL/XT7\nWVl6wm86luAXV5tZEPIk2D8J5136FTub55vlvSJPjzvUCg5RXFUpBvHbXj2F\nC2Jms/DcFHaUG//fHs6GncHvnhLYCuvYPSPNi0CVFf78pubXL9dJLF6Eznrc\nnslj\r\n=15me\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6DFpbIScoHKGUL21Z5T0fvaLQAcWB5dfZ2qM8APC00QIge7E0WNrg91k+0UAP7JL49lGGc6zDsKNAel+/SYk7UNY="}]},"_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-fixed_0.20.0-canary.51aab0ad.0_1606784738193_0.36784443509181974"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.8fd4af5b.0","@material/top-app-bar":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-UGuODyxbxOyuRGluT3qZ0D13kGZOeUlgbDDCZGqvfeKlzS5eIG+SZBghxO752rqkp5T81+Bk6/qp+19ZYULKRg==","shasum":"c3d57c9fc064fb3880b87559468353d46ffc73f6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.8fd4af5b.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDD3CRA9TVsSAnZWagAA0UIP/jgy6PQzTjcXoxyjLSjU\nEXgfXlIOYN/TpF8+8LkGK40B4H4is+qz5XRtbZgS+qMcHp380nDAN7J5RanG\nfxu3FjRl5gc6azGo/eAzlpsnwqdCyG6d4E8Z7hx5NSLsHN/M82neo+evEVqi\nbRmmbNavMw1yjVRGjvh3Trp5c406htw5sgsFk52AdnZ6bLwA7Z4A3YvWA7Jn\nFbIwgBH4sRoJslyKvj9FB2qOcbO2iN8nU5VZTePnffrOzL/kdh49Y6knx0jK\nhN0Ym8g2rELtA74BlTVXI1OAOA8vO6bw5uySUBnBLSaNyEBsjiTCj4T/0hka\nZHQkJF86Zg9pPIqjyNypV1HNxOpi3pZ6ugJHUTcZXDHB53FKeKWDLcbNIDvW\nScacKf1WGWDlcRsrMzssUP2wZKnf5lSikdATME5vBFonyIxLqNJIq+6U5sNn\npLPbInNUQopT1p5gKK8DFVtp7VBRwYdXKsOfujPvIFbbLgr+gtKmXoHSLHp6\nBnH/O8cUtWV0sAl91k4/TZtJZVnKy4CvRB8qeb9To1As34bYRTIb3eJDLnaY\nXL7esWaeJowXS8SVLMJig+6AEYc9WQ+WVtd4CYY7U4PrifDG4D6f58i000cP\nTUNYFYsbx/gG681UA0O2AWIASesr9gYPV/9L0RB46UztSLv5uzIL/N6F+4bn\n5NEn\r\n=ZH71\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDp+E76wvH7G5oqX9T2Ay4osmHOT84doxapjBXC2+hmbAiAAqjVVnmCwhfGQCqGZ928b8KeTQ6naClJJT+636cbjOQ=="}]},"_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-fixed_0.20.0-canary.8fd4af5b.0_1606955254973_0.1061705932829049"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.26d14d2f.0","@material/top-app-bar":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-E9jEUZfu7mrA5iBemolEux8icYouRiVxbl8vmCtJlaPXFID8ygrKsb4ZSO3oUSOsavr24xkNBFFH540C4yybEw==","shasum":"835061b6a834f201e4e6d61a6df1754a3cc6c927","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.26d14d2f.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDesCRA9TVsSAnZWagAApnsP/0aXw6MKDig2lWPqpSTG\njownl1y+tbGhyGgMkMJsWQ+rQDwFT+cGVLF73bs25uQfYc6XWxNZdpRk7aIS\nv0yHy5qPSD/akvtH24LzL05zXhygIhSIRgo/sukey63GJmQfNJSsnsiUPZH5\n4nwia+JnQObBrFOZFHlD0+3bYog6OTTNEqoDbhEKxqEklI6lXkqlZkdeXhgu\njBwWu7B8sqZXyQ44Y+/Ci7hgp00EM4sU44jOd6KQ9zJqAULgbQa/kbc8lAdG\n62MKJJBwB+6Cfl2e9dywzDozG5fgLiXFxmJoVLpfIZmHZlTr2mbal1eA5Lie\noIbQAjfrzofG61MrIkDN3s9jQxTf1oNYd6K6D/2dJWIDig4xHXOSCxAPj0bF\ni7u0KFlttf+4tg1R2ymXvyUdfMyQ4xJdDG4RkpZbRe4DeCgKXKjersOQqKhy\nq1B53Dks6YpDixkzvWdJtrBNVO+i7EazkA1XyMRSyQUUQ33Mcot4eykxeNjN\nQenex2Ib2/b2GPLuEw7v4eKkaDExHCBNdM1iVtPkBWpyzs+S3DWIzei0o5FX\n/fMqGk8lKjU0tTJqg38SH4uVQ1kzFCtGPKqJ7u5kqvE05jgMqxpbD8ZxLy4v\nP6LuNXR1xLPujKdMHgso32GuRQHzWz4yS7v7UvIurj9XX3y2Uo3ulh9uV1Gw\nIUqX\r\n=qYOA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRa8J08Cph9BcSZHo8CND8HTwlixmanoJOjCN3nHnXIQIhALQc5lOb5xw+XckbdRYg5eC9TLFjfRcV1o2ljk9SVEuP"}]},"_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-fixed_0.20.0-canary.26d14d2f.0_1606956972179_0.3794844192574447"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.1663d7e4.0","@material/top-app-bar":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-90G6XUzYlojMuRU+HZE1hEv6rNZTMYCfBCnrOfW/jWu5OiKb0j3laEobxHSiEA3bdTmLTOFzCaPvt2mgFInVcg==","shasum":"06e2277c9cf911da49b0831e4c58a3f5ed0c958e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.1663d7e4.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDyBCRA9TVsSAnZWagAAVgMP/iOXvFL+7eIph/8WjsC5\nlxTeF5lSvqOQ0hDtZPsxJGpqokd4To8ziNKJnh2iE04JTCGA/B/R2st+fLgg\ny8SiGK8G6R1xpwlQs/39WFVSnd6qRY0MM3FO/89yd3S+OV5EOoOutALvk4Ae\nGNeGKJ3WQS3YvimbuDraOBaUeZbaCpBkLEIdza8ZINjaJxPPBqJRXdlEM3PH\nQLUGO61e0FfAqjEfPEOyB04RqgHcsmJONca9cTaz7RfPXstzO8TWWUYCIYk+\nauV9hZibNufn3mk9378g/gHTxlanp5NQAffqqnUcaiG8cL/s9b0t+M7CXNak\n5IU/fJMsqa4uGDtjD1qK8BZW4UyMdFq0Bocs2OuPJLwFm+65zPyM199WMTSv\ndVIcBzUBVEnVeYe0BiIaNUGvcbvO/OvaqGZ6dZgZMEwN0XiDkwHA68HWhBjA\n9uYTWMwTJ20g+YA8vipi5ut8DFNvsKFRg1QzONSOC/lW3SfxU8rlInVfFziS\nUdwmW6NKOIPNoMJHCNrFsmWLKV7FG8pu9ijtRxVf1jZm/x6etYOW/zUyacGt\nVPAdexv/8LUpMT9odWKejIus/ZnSuVOmZ3h4HZIrXDkBxxyL83SZ0tO9kLk3\nCSeyPojTpeep280cixbFIoCQZimScfsthTCN/h6H4x2FIYQw+fCwIY5TvhMo\nZfA9\r\n=dmJJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGxNQHhbzekqPbOoTFlQzBbex0DfQZ4we40wwBgWbXqAIhAOOn6DRsA+jNV1BOYNjMTA8IgmPPZqTKWJ9yUENCqb+3"}]},"_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-fixed_0.20.0-canary.1663d7e4.0_1606958209101_0.774108252881704"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.cbe9fc12.0","@material/top-app-bar":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-rMoZFbPfx7CkosmKB3vCxCDRlas6/VG0BIrtP0QntsKGiZpWNUQGvoZ5NW0o06no2/ap7o6edsmn1GNkygOAOg==","shasum":"abf9c1a95c957d16d8fef11b3f859b1f0c594864","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.cbe9fc12.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTd5CRA9TVsSAnZWagAAW1EP/j3FK23ZLxXmcNuF9wBb\nOgGmOvmibh/zFBEhemMr7gpMiBZLeraq2nhHXvL+DP5CatDCDrCu1u65k6wv\nG4wQUPP44EzHVAfG7h+PHUQkeItWygoJphmqdi6VtsOcqYENkQLZLe1zDRIZ\ncrPN9yJmVEYumqEqCe/IqCj4wtGHHngfeQ0Z5kvIg9qkI5tmKtIxmpnSumnT\nV1RzKttXZ73L2qQ3vyxE/cBjJ1NlJBtON3jET4MJXA/ND4f1QKcRB0C3hlFI\n6PHFOnyVNmKLKabrDSpKnyXhe4lL4XhBBKsnQZ2xrPBjiApctLoKOI7W2Yzk\nblO02ns9cDcxqmiDe2PBX4ZnkKHWfw6Zr5R0GXiuEpxVFNQwaEvNlQhYlmCN\ns//nWBB2n4/yZvTE15V+/4tdCgy1GiN1Dmudesz5VvUhzW1BxaVWFYUHJnI5\nwRDzldIqAwdtqFivVlvf/8RbTtjU817GjJGqGyKy3PyZSFkYVlwZzSGGMscu\ni0UT1ijYTnkoWezz1CP0BmqL9vGUqdn5xzrYtJ4NwKNQh564QMhe4A2QaqBe\nz/omVAoYrmaFcHpFfKTJdwlw+Sr4A1RuYowm55IlKUXOK3w8OBdYMmspcHAW\nTloQ0JjeyjhallXXJ6Ibui4uMk1RWf9PDRnQmSta/Yd2OGldRGcQURHC+w8f\nPesR\r\n=TSgm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHPPN5RPHUIiUPbwHygBnFu1mrrR39i6Tej/LG2zDU/AIhAIuaXZfzC4i6bZUwVVcM2Z2Opc0MA3rm+XsUhTp5mI+1"}]},"_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-fixed_0.20.0-canary.cbe9fc12.0_1607022457503_0.5382066171406232"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.9755be10.0","@material/top-app-bar":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-P51bFPs2VMoKKoZxNfCoMiRHnDmGE3jHG1hjZhs2UeKc5ENo/v36XLhLuxP/095Z/2rVZ/O2LMRfc0FfhWKvRw==","shasum":"f004ede95c9dd5ee882483a260ca5a443e23c5f7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.9755be10.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTu0CRA9TVsSAnZWagAAzbUP/19qe2AfqMifGxqsUDWa\nFJrx+2IWHaEF9a+Dh2P8WrQH763LIiZag9Rgr9ye7cE0/dYOhm8Ce37bnt33\nJ5N4mCyjP6H0rwZeqOCjVxpKuDocFyUmxRj1Zlcrpn2HY90I+9T/pApPMzsW\n2FDNa3chSxtnmTpsa6OpwCDRk+ane2DQ6ELEEso7pXJfkEh+6n5N9h207pBv\n1R7VjMr4V3eEtL+W4TYCjizK/XrJimc+NgVT6dwjbICXJiZMbRvVRuQqiGtV\n2jZd8F6d4tXbRZRd76cSbVAAJey5vudXUmd+WCZ8fcs+f+cV8T/CeW+ZkGck\nycZZ9VmV1TogEZKg9Ly62Ojl6y8V3d5/7izcWluVBfz+I8agm+yItluNN1ae\n7Nnrb/7nn6hBJY0TlSyb2s0i8+j0FSmgcjMKuA4ApO4n1SKZDhMCVTv7ClVY\nkYavnQ3+obpUlBP26C09kILEnRFI8000tLVoX+6FkE1AXtIPJ5RBh+f0tjwx\nET6cLNCiHUr9F57vQ6mHZPG8FUHwUqFtG0FSHymOA7ktpwpGGmW/b+igjIY4\nwlm57HpS3wi5D2m12ZNRk67qfEtK9sd/pW5MhF9Iql+VjC0M7FZcJYgdX+xi\nerfQaESmflOwGEEQul/YZYP9Gfr4tjz+vr+Eb6JExUUd8gkiQApALrWon7M8\nu1SZ\r\n=Yftt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYXiXKmjaxwZHMsckcaRbzjDFnXqbJovlWjqMxa3hqegIgGP+41CcgBZXNZH7uwLSyvydBxwJ7UEVCkrySSG0yqwE="}]},"_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-fixed_0.20.0-canary.9755be10.0_1607023539820_0.23115673983874196"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.20.0-canary.3f64270c.0","@material/top-app-bar":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DnTCm47SyNdem3I7HBu6kZMTge52sJDPgfrhoeG+s/V7CIxMslkIgZ/IQxlSEcfFJbbileEbhA9iPLUiITmedg==","shasum":"dfd56e4d1a0ae95febaa559279045830623c30c9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0-canary.3f64270c.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV2RCRA9TVsSAnZWagAAy14P/RTzusORBEeRzLFq+bZJ\n+7s0YBRk/XrdxApQI22FytJSiH6XTpv+apX+dB23HBwntnzQNE/JD1lnG9rm\n42klR9O/rgU0uMFRIU97gxVzwOZkM6pLgMFqbuOO1BjBg5b/MO9v5ZUqYsSx\nTW0uqV0D1+8OvHzyB3MIYpODpTBoWSWnifiU5llm1tHnHqCedRteprGjQU+q\n7hi5VrDD7smoB/GkAqHASyw33mvZa5os6giqj+xRJ3v9l2HsBeFbRoESItyE\nDWhtmSHpqsrhG0Z8S2f2TDEMb3hP73wkKTLXH6B7ZfFwpzTZY4fAtVkr4gwq\n00lqh0mCHEZ8t70Re6oMaCuooE2jaUSYE44Td7uU/HLYvTjCnbULFBZ/BDz+\nXeUmAmp3pdLFMxkkIx16GzGfNUVk1GoIBvI6nkD7i+e15kli1T1UbraifjB1\nEtlmB7SGA9IyF/173EyDdadb+0VoruGNQRGMqi16UMdDKMDMnZPu1ZqVL2cU\n8UGaP1FCiE0D1vNQN1YFSCjdCNGGNlwgS+8XjcPQrVDJDbuARDt9CfzyHxs/\nCeV/+5jB38sexcGNhsDb7o+4D5ebUTEI1Lv55x3+NhMyfGceIKDOxSpe5lQR\n+xfKZ131Z964f8tT1wfEHGngW4v+cVfq0P4ELf3BKkJ1ahYkRuUdrAGFAUrm\nLHWV\r\n=Nbr2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0inaWsYYQRKoeeyoGo7V/MWa+Pz9BghTRXbogyM2+5QIhALpK/xMXnAmlxVmYOcb+28HiLvCJOwmYUgANEaT+X/T3"}]},"_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-fixed_0.20.0-canary.3f64270c.0_1607032209267_0.33594253070887503"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.d893b14a.0","@material/top-app-bar":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-axF+s7ela0pckgcrGD2M/lsCQ/Mo619RIaTrkey8f8eMA+EHlHj8ae0XcOvlmrkYujxptCfvNgNpm1qB2zd1Jw==","shasum":"3d98d9b1da8edc68bac7bc3ff4b74cc4f5c7a157","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.d893b14a.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWYQCRA9TVsSAnZWagAAjt0P/0fPsUxfoovR7BtyQ78X\nlsf8KZaSl+TctUSd19MWUPKuqZKH+uzGBmsLb0P+CVoYmLzyPriQDpSHn344\ng7mmAYLfKrA6ESSHJRHzJDuN476+5BlZo4tnT60lUvYC0m+9RLZYPLvv8gJH\nkP50e63ZfoMPMqO1M6KEiPGkhlufRvXQFZMANGHeTn/0OogneQUF4mKlvi6z\n8lgsxeqHg0NXa3NxPuFj282jBAJfJbMVKunz34YCgRq7qOiLTYYy6MHGIweH\n2zsLOg71t1tQBKdXgPJ8uM9bntMlXMJtQTfOZfMf0TVjaGaOYcG94ayUUoPj\nHcR7JaJcHmr19Fs+bqCr2Xd/MT9NwtazTAOtzslqiC9V7lCypsiLY3b9C60P\nrIFBBwfNoKEVICMwKvvL3s/oGkRAd+Z8vBbul4zoY45fP2njqgpWhyTL1XyO\nhyA+4no1A+DijpyvITF9iga0IRC/wDat9cS04i4pWlAhihB3hEBOT+pWKC84\nNlu87IpS/hpCh+uB/sCfrc4hUkBHX2Uy73vNzt25ofrpUl9k44RZzInrOqkz\nB4GAnBqUSV0q+xN65PVGem8oAmndlFZ6zN4cYtleJZFSNttnQNxZTJtkyuCf\naj8kyybM8hV5YShiAC2mO9IOqzsZIsR9FuA25QddVtT9bkhqmATyhbwNgI2O\nLASg\r\n=I+2I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA58HqGQcxkcYG5B8pXl7y+xPBYBz9DKL+iurIQoNoPFAiEAi9Qz69puwSzhfJe9AllxGuyB2M9bz5rd6vLAJ15iL9Q="}]},"_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-fixed_0.21.0-canary.d893b14a.0_1607034383654_0.6343337350879903"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"^0.20.0","@material/top-app-bar":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"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-fixed@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-2WF3AHYO0xZilZRsOo9E6Xcn3iYgIVcQlK5jRNiMdLCHazZnE5KWUbclkC39x3c1EMssxjXZKTnhBHPK5fd+wQ==","shasum":"6d7790f204c5ccc6d8ac54538a85bb623c909061","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.20.0.tgz","fileCount":9,"unpackedSize":27310,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWanCRA9TVsSAnZWagAAbyMP/AgPhIRKWwgC8C1fTzf+\nuPvhOP6i7d1UE75JonUnGD+LoYpHZ87xcrbfm/CEdwkPkqrn+dquhMqtuL8C\noFzruuygSe3NdWcfL9GPIw84xMYtpVbgHkaIXBJlH494pZGFUjsp30L4T2RD\nAtNpqJiXO9OOpYzEgtRqOKRF3CIFWGJD0nBcM1hB2epzz+oi0mmIlLIAaw5B\njACLCZcprBffxUh3rfPAWEvwv6Mnpy+hJpEIwtLLBcL6Ll488qPTjAaeCdNm\nFeOyLAQ0f7gvIvMjQWKXCji5SdAPE0aPXJrQy4Pas0DPFvfkGR2OybNaK0RV\n+Q+e89ehprHc9xDIdT9YW4pligCO91bpUURs+Ywqbr8i6BDZiPLJpXatuTju\nle4lIBwc+MDiHX9VjDF403UmZ+TMktSYhzUIaYoI7sFOImcw3tUYXXWtAlDp\nQYs1C7VnyfdF7K1bckNkLKkmOMKzTYNAN8/LtlIwNDyjRQcPK6P0bvxkS0M+\neqWMsBBmzqOBZNvFcezrALE1L3x6hVqEdnNjxNbM4yGqj74ewp7F/LmxAL6S\na6mOdWawVFaaPBiKaaJKSuTthd76H+u/RByGhCRMRZq9Ce/vCGgVbk6os5zK\njlm/P6eCNQSUQXsiU9fFBbkBeDbOO8NTJizu7cmj/nKzMDGpBY5P3GSR9JD9\n6KRb\r\n=wNs2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQTUepYQVBDEywaH/dPLcKJYvwrvgYPefc10mz3e2TYQIhAIDI7fbe/b8EO0LI4mWSWbx5XftRav6rYODc7r98mX1H"}]},"_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-fixed_0.20.0_1607034535190_0.39603672497448095"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.47c7d7e5.0","@material/top-app-bar":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-zDrbLa36HIHML2jHDhhE546mEf+e3OLej3tpQxD8jsGsRFa2vW6YVeuwHbKc7ltSQgDcorxCxRUmhpZD8oryRA==","shasum":"da902032fd8438cb2efe9d13c4d5148c7c59762c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.47c7d7e5.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf088WCRA9TVsSAnZWagAAym8P/R/ffZcb02E1ySA6PkaC\nYb8xGJ+Q8tyek5ZAOzzf/7QYDjAzPj6L6P6HI+nPWwraGttCdQdbKNLB4knS\nahcNwWTBjXjHgWZPiD5fDqttjHmD88+nOSee3LoE5GwEIJ9OA3tdl63fWtuu\njnP59dWrEm3a9gz/gsICogqNmTQw6yj6hdefU8EpnePJO3xetLs7vOelTeV+\nu1sK6ZE1qBFxAx+Xv9JaNO1q8MCjQfR1zKMwfQgaaOUxAi3I1qVHhyZ8zyDf\nmUj0CCgN+IPNFy3ZX2qKJOM1C/8RnTmi4wPDX0cQUmMqKWFqwkF8XaI8G1Sj\noJxJTTsanF52GBHSngmn+X2zh3tu1TL/jEodksuK0RMbR5bD90XIvnHNVncN\ni1DhtvxWCTWh9rAiR4JNkIvLIniAg9EDT9Ml6dFFp5RTb25b90qoCHx4SdBu\nNlt7nJgKOP1eDO8uUXSc0Dgp54w/i3H8EXSyXlzIccY6QkX9dtoaroKum8f+\nKDro+FvXrVSqXlis27iGRgkEjX3xtjWRYc7kQbUpij5wbIpiF5ZBTy7gDYFe\nxvG5dfn8clMsKrb/tYDV8MprjySwu5w5d2vBc8SzkVc/+Tn7tjfz9uX22V4p\nFvHPEcPaE4u3uPafmW/BPRahrBsfJdoeU82EWAEhOVyPI4uM4YWRC8Y39O3T\nYdEQ\r\n=tsM5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCxIV9WT2J/m6eNjDU/5SFq4XDtzWIyBKf12wKR9Z06IQIhAKh+YfiguhokZCL0ZI+2GJwclRze9qf6+Hhgufhs3H4i"}]},"_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-fixed_0.21.0-canary.47c7d7e5.0_1607716630338_0.7614308803339256"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.b304a78b.0","@material/top-app-bar":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-yegOY0bXrz2KFqB4DI19e4cNGKTL33oMS2h5KaGTJIb8F4DBpNCCOE4FU2W0835gHz5vjG9cyAMNrmX5SIa/CA==","shasum":"a17f51b17aed7a3575442b930ccb9b0c3c974ecc","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.b304a78b.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RbICRA9TVsSAnZWagAAoNYP/jq53JdGX/IP1VQwiYnq\ny515CrhWnzoZ7jHRAUPNx6e8Qzhhpe82g5AZf5XxsIWWibEqWyhttVSbWf0R\nygzfzt0xpUPmB3whOfZcHdyf5y9iDaDHUbPlzjHE47u6W1zYaMr+9eGi8LPX\n4Kot65Yi9vEUNuhGwLjknXGzDC2NR3tkY5EM8m8DYtkMFW9L8iJfMmRdSbYQ\njP+52fZVG9eRODNbLp311EtN8fCMFid4zcTsGn3tllLNcap9BePJB58Mudx/\nMwgYMlr5Wv1Xv5YK6KuKM34ICRoOGdtjKwOm0o4mLH5qTEpKCP3nmx2DI+1T\n1G3bg/djjXTziBxpwus9ISW6XVDdvHdufONlPORepLb7YgmLHDB7R5HxMoMJ\nitUV6SDPmqsovfrO/80EI5CVjP0iQvPaVkBFgIDycKoPl0j/APUNb5Tk9V4L\nu9/10SBGQqb94UNfmXJjYlzdBvl3lTRmPoo+rrEM6JWziS6hHreRThnqhasv\nb2a43373uT3HuH1bZoz92Tv11vFKSyNXsPigyH5U00+YSvhjrJI7pyUtS5Yl\nJLO/U1PKr6SfJgy/t8BM5UbWULeUBZKHdPfEfqYnbZTXoxb408YeBsZR3L2e\n/vi/noSlVtU96m2udyI2E3YLCKsaF1BVSjbfTvTS/dOWvQgZkFWGKbTY/R9l\nU7D7\r\n=jTBi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmWxffSg+oYgmqrvmTabNstsKlBQKSqYGpXXbVapzECgIhAPxKnDXOiZgWHkJbp4JDCDnXIc17Lkk7nV63pjo+anFe"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.b304a78b.0_1608062663729_0.4181273342897325"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.777c5fa4.0","@material/top-app-bar":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WEVeIaI+K63TOi6GHHr4/6HHlcHqUloAJL5V0SlvDOmJG8ULWAd46wD2E4Cn49okg1ojiE7E9RnOjtXS8XeAcA==","shasum":"f36348799281108674fe402a7683ec29e67c9532","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.777c5fa4.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oILCRA9TVsSAnZWagAA9IkP/iKbff+D+2oQZX+EGgW9\nuzIfKrrSNZ/QsDapQRYZu8IL9YFe9rEy8oUy6P0yQpigoDAgoTzC+yoDEt1k\nT0BRZIN6UDWISLq5R2QyIneBEWdPyNwFd6k5xti3GQYLPqmKqujir305A0vq\nJGNaC4232lezMeGMEEHmMLp36gmNam7xfIBd9edJmWOJIGnKlwd45PBhN2x9\nn7RoNujHAKj8noQhMZSUPuiha0w4/CnJYdk3dNbKz9og3sM5ivUCewGj3ObY\nBlSJhmZIZ6H6fiIoo9KqicSziIVQ+yt8QqQRgSGdwtyT2mxoWhTOfeGjQ6Sn\nkFSWk3HZsgr2rgVaxm2mIXOnVNnlL0xB6oG/gg7JoO0yhvzws4DLbMixEIHE\nG0i0F/6ru8MIjowzHkj7gqAN8VdyD5HcYMKStyeb5v8MqnB5pVgawwgN12x1\nnluIgrhilQCnlVw4eCPteNxXjDp6W/4aQBJ2k2v7WeIAT1JamS+8mxHDjUwD\nwMT4697Q64Z1FShV60qisrthHjtyzGS6XhRV3YnFp+SjSeDSrrY8IbrZFhgy\n6hpke+ZOM1+Z8aUgKqhFjXDAWvIqO7Ce8fG5Z5XjugPnS6UY7dHske5Z8hru\nTg0Jy3zBygthPttx/+Z6gmhFtJ7lrp1Iq/UijCuZ1jVmckSjEnZNZ8wP/oNU\nRBKm\r\n=4SjN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTOl8X+i05tBzCOqPUvMaUR3kdZYxRVxgJNpSJK+xbnAIhAKZpfDoe93+Vaz8a1aS9KiG8f2VhjKUiPh6KQzeFgyfi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.777c5fa4.0_1608155658826_0.29469660486823357"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.635c7996.0","@material/top-app-bar":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-zjgI5WFw7STsw/0uq6wv9Ru8u4YYOFqQTG3ofpwtlIX2Nsu+M64ytqlyRV57DZ+WhOgY1518opr7QXVKvkQ/2Q==","shasum":"446b801a8c3c8a79171273203b2f735526e7c5a8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.635c7996.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+p7CRA9TVsSAnZWagAAw08P/Ak/fwfhW9mIcNxft4tc\ngqnAQOoRZoyYsakOeIwbrLMfaBadkIDibn+YgDsUCe+7bPrCrVSNIRnUIDvC\nzeIpnoOKpRZFC7tQ2470eWn0EvIMe1o19NtO1Yv4YMFSDBLRPBshJhnFL6db\n9l14EYnNTRy0RsX19tuEpXo8Oc6gEVTnE7hDsaI9VXQRgTNRxzBLYCXqrp0i\nLthGlBc0pWuTubF8Umlv53N9R/ba37hHrRsrNdD4RRQq/4iWWujXFuq+wxKk\nTtfppteOiAe0wyG6CNJLcshY9VV0mVyJfFMC9YX78XofAzO93psYNUhaQNfS\n7Xv4eeTRAHF+P7xjGUg1Mpl3tgFeJgemRIScuxusHr4nSSTXkEumgi0RKJUd\ngjtHK5Nhnrot6morhRvrck+u4P5QKyxiXRwlSyWUjqYegbufbH8kJudJVBpM\nrvj9ijf/1FvaPlSYqSWURnDMRzq6KC6e7w5xH2yOgE8R96PD8/tkAzW2TFKf\n4kWG5evUnNSVZ5y0KY+Tcm6t03OhtRE1mJy3g/3hSOxsXBkXaNx5q1QmAN8M\nh0u5KRax8Z/ouLjplywQGB6XfLk5Fq/b9txKvTuqCLSIoxcvS4vp3lEBPJvo\nb5Gys+EqdAe9M16kJN2HWN16/9ORQ7AvZELoXCELm8w54LYvlj45iecjaYea\nrk7L\r\n=zyL8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIATIfd7W/fVRwGfvPn8W4YvlnhOf6t2zNi16b+Xq8uRzAiEApVR/qWtoPFOp17VWbb/x5m8gcwPySXABH2CNDdS5S8Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.635c7996.0_1608247930717_0.42851901927194636"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.20b0045f.0","@material/top-app-bar":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-8YJ5U/v41aO5bsDd37w2RKh27iqhGTE/SlhsRqi8nCk47wX3PwfX1TKn4smMzJG9LkPEWKgmI+iXinCyXKJ4+g==","shasum":"07e313aaeed490c59023c4d60a51b1ec4514f778","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.20b0045f.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+55CRA9TVsSAnZWagAAxogP/AtBbhLfR/ghRd++U03E\n8ppjHg7bh2ek02e5lir55drfGS7vjjbvVlMLYTBqUjZ9Vty+Kd00B3FbmfVI\nAARc0TlS/U179AwEXhdg8wXRCZXFGJDGfdV2Vz+d+ujxZ0Zw7Eecs4sUECHR\nKpUsILtt0gTjHuvq6KFG5CSXK/ZIrOjHuHXRWucGP+IGpNpMEQOzlvE58plM\n9aZuEBi2P57EwQri/CeS8n+RVqmZ15O04vtlzNQtTpR3wab21EDMP8O6lFwN\nM2dyC6ooM6/7pGDezpnW+VCeFMn8z8cQ6WiT0Kf5QF/uYXP8XoLZFn1f11Dc\n0HUR5+ZJvpiSjUCs6nBBms/Du8NhCGyYWEUskebgKML/I3PlEGu2q8I+kjBU\nEIp8dUczahW9uijKREAVcUEUZ0LFX+P9U6Wv80dHOtJFMGQIKxeY6tw4EBTY\neST4JEe3hRxImEAInvn1mNsc6uj7/aWcv4EBAD/rKiQp2AV+5uLorjnb1bdW\nt5ikIW83yiFqEk7DR4ruvTHpOGjle9Qli8oHlYH3ES3Zs6tIaNwaUzhI51MR\nYSsJptMuwgWpayR1wDSdbUOWCCe8lCyyF5PrdpGJe9A/UT/1n0BwsQDl2f10\nvYxZGIaJEbCGIBACoJxvNi/mMlAzgDNAsE7eLJKTbz1jJNalXfM+0Yr2WsTz\nGfZh\r\n=WYeK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXSDjUHIP/98WB/kH3Ob6U40j51mZf20MqkP1W+/jSngIhAPGBDy2sCZs8ANuip37qS6IT5K6K3f1IWj8BfWKXTJ49"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.20b0045f.0_1608248953076_0.35044130514529814"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.41f77000.0","@material/top-app-bar":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-u4BZxG8MTDdpmMfcjaMPhJ6+ZF9DJes6COqrQFm9Y6HyHh/dt+AH/RJc69aXEzMtX8RWuzq4UmpL+lL6v8AuWQ==","shasum":"58aa71e7f0cfc0d95a5771d213ae28d1a8572e28","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.41f77000.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/lXCRA9TVsSAnZWagAARmgP/RaJNo/BkSoEDigTEDw/\nVvTrxuz8f/oW/b107R46XYRRYFH9zsOLnLuIgqEFxxELQZXgcBXcXDl3Dr5g\nSAAi5lsMPTxzXJcsrfR9WdSF7/9LJOclLjkGPNEG1xxwCYk7rRuvptcxOWCr\njdqQQsQToQXxQG8rAVqQ/gndkX9Pk5O0K+TJa+VJcKSULT6yFOpzPtNm1ZPT\nWkQ9CwMaINMz3uObBsPuWnLBMIxVP79veGHfH+J5SenvbR0qOyPknMaPwsyD\nNcqdf30KWY8faPPrmlk+Dx1cQSM/lrvrRcPJYFhygGRobvZ+7V49GHQN6awN\nXGN0Ze7BrYrWR6sWzJydYCh6lMPRq4WKLpejL+bsG+F+FoShpLDuV8ZA0nTT\nE0isr5Itih0JMwj7Lw+A+28kNjP4f5RYDPazqFNKXQyaSQBKM2Mm926A7Y1Y\nFmAAsicfjlZVuk/86CE3GidAzn+2+BQU+HPKI07VuAYFGvjJPpRX7A8hPSNK\npwFZd0HZ3c0nr2RrSoSt7MtWjf1LgaSJoWgj7Sok/jD8+vdH+L7qLf0ziiF3\nq9EMR7kFNa5QSvtLQfTJuYcSqlBhNrzxpwrfejQU6nowKt34GrSp514AV4qy\njk+eo97wWQEh4VZDQcB5702Xu2uZ/6ijeM8QmFj7OEkDSjzJHvC1cQz7x6DW\nFdGu\r\n=L3W4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDqG8CHz9LmY3hBdczEfI6LESi6CogAOWu8ApY1bbjPLAiAjuddV4YWidAOdtbbFESwsI2salovf7E3AdENO0zqX9w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.41f77000.0_1608251734362_0.7074933654022362"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.afe4079a.0","@material/top-app-bar":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-pcIBgMZ/XzuzXSUAK2kHDKBMGY6NratyKLAYa161l/hafxhJVJGNkxrh3pdOjNy5cEE8UPpYM6Aiq0v1iiVgVg==","shasum":"e710f52f3095c9b3cfa47c581bda4f736a1dd93e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.afe4079a.0.tgz","fileCount":9,"unpackedSize":27345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i92CRA9TVsSAnZWagAA810P/2rLBMQ+1Otvy6GtpYQd\n5vbYrhf0BOWtrk2o92HcGO/H4aMbUSANRLI4bTgsGGP7ewb2bgbnu3LYFgvI\nJ8+em5sBEdOP6quXLtqfG2v4qx5Z8bNdMEvtSxRxod+9tOrpP4GWb2FrrpJ9\nfXiDJaPD2z9/OzqdtDmbR8VaTA4Mh9IbzATI90en5FUEbUrjHi6PX5miLWMw\nhb8T7EZLUg3sH+8uEFgjrZqsW4WE7Z7ECv8VR2S0NImJzBajJ7a7GWm3EISF\nmUzK/TRNxiuMlMuFHwsGd6038F1QleIpaZNIYwzXpm3G4SWj0lg3wkBLj7PD\nsHj1W+dldoY9Fstqo4v7Dhwdwc3UChMZkXrZPnE27lM2meECsv5QcVIshbht\n95lny615p2SSViebJcx70LGWlEgcBddaQDv0ayqoBh42HI8ndw2zMV/5DO5p\nXFWOi/SeF/3V6oGvZN+sCFnfpERzTnsVwJDPcdm0CwFEgTWIWK+fZqtUpcQE\nXmAf316A8jTgzgSLu/iDTh8ylTg33ldR5Vyk8hbxn4mkzCpY1dp7HnlDDj3h\n22RXVRso8UDDwmcu6UzUpcfEhQjLtskjnUSCQ7o5hatfsA5NP+zQSOHKvnxW\ncXCgHeH2lw7FcGhCUtSdCQ5QJapBx0DrtumTIC3/1Pd6Lb0sSM/Q/bI5zMSv\nhxkT\r\n=bHaW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyCwJGYTZ3lrl93FGj1SYkpMf3H6hteWukXtlqhN9V8QIgdHkIZX2GsshVRQEofiMsMAE4ivAIZ9/epUWdJp4XADk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.afe4079a.0_1608658805924_0.827143393257046"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.407ef8f9.0","@material/top-app-bar":"=10.0.0-canary.671d72d95.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7zs71cP0m4H6IVS7Crfd6R15SOrWu8JcGc8awU3OzBIzwYD2KHLli3qJRp5Sg08U2qZVIVeOm79/EqFTjchXtw==","shasum":"6d1d95be90eb4d68a43df63d8d2bd0e91bc16e6c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.407ef8f9.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7QciCRA9TVsSAnZWagAA1UIP/iawyPG3z7vYpaW8l/Vd\ncCUPTa8FUi0GSFPPPO3Lln8YVt4Iw0gtDW7YF9FbNUxL/18MHavSM+izBs8j\nQt3Yw5rB9J0Zmae62jg4VfQ6Qewlfk+9gI7JSY5b9mzw4kPmNFQnItG9r+JY\n6LPXhUFfRKMAb4Q+9/YG5+mX/Gz196rV/psSL8+bybmpCV8gAQoWuCr/mOkZ\nfkvBhz3XZ/PnMaFcpO8E2iz6KsuV8snI5DLKcgeDZ6lKRr6JFlz6daa9/FKq\ndBk3j2Qc5O7JXL4q3oKu0KTafnHL0373eoVayx1Hc8scIU7oSGHDNZDI3BCP\nIecALAudZcYK7To54JQ82AX7adbd5omAI8UVickxqi4aCCVd3t2jrURrQmKh\nSMlgbxelau+TIA6IqnCY/LTZD4rMNxX7olGJ5uLJg5dViqNnl//bw7DjTAgd\nQhIsH/mOIKm+OjAcBjEjE27kz30vnfhKV2a/YmXowTSL6SyL0QmT+MeF+oGO\nbhdGNGwZplZbne/u6D2Zqd/0yvSyLTa8ui3VnU2OFh/25mXVejbUDL+SIwjo\nf5eI5ZeS95IUlUyIomO+6hpRYIXlRre19ZAUuzGPi2Dh7J35vr8fAEWkEyWw\ny61gentCzcsLnUAR4DjCg0d91zU9r2ERSKIZQb5mS46oZ7a8/LeGF5j0O3uD\nmhaQ\r\n=Rk/I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyrLtz2Smci++FLXQuXtQj+oy4W1rKDIvVUoYqNHuBBwIgDHw/VuxLs7zDd+SYd65vtDesnn51LImOJSXHzV32ue0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.407ef8f9.0_1609369378032_0.13890981985888162"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.2e26e137.0","@material/top-app-bar":"=10.0.0-canary.365c69360.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-BzeY2Wml4THQompSJQit8VDSZEDtFCAgAGqWFPxW+RB9jL+r4220K62a3XWkSB6LO+5XxuROtcJpyvofPCaHjQ==","shasum":"ea1394d2aac3d210962913badf6aa9490379e86c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.2e26e137.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LTTCRA9TVsSAnZWagAAzxoQAIOmV4P9tZj7pdJSg8Px\nV5Fz58HTnVgSqHq2oTE11zb+/8tAcX30W7HLmb7jfaPZyjYjBdv17IK44K7w\nblryfaUYrJF+X26Wuz5M1SoCZscwoes1q9Y0t6VbP+RvLSF4HeWBEDY4BDHS\njnI/90Iu5dI4jyB1hBgThCp+B0Rms4/8E4519FY2FNB+a0O1NBOPJI/6UikV\n/LMPErU+DVs1bwhWOYroZ/5o6lvkDuvVLNTT5ERyKN+JB3a4L3w948g+FowF\nrzMwUn3lnhIvZs7yagspNTwXCGpAa/yFJmwgrUNpPNcNDtz4yVrQ2mxh2nk4\nWeGrYP1vf50KzrT+CRA2OVp98MwMoIUwGCblFni7BYMCSXd+0w88XSmxCESt\nmgApnmY3XEf30ynh58VrpKabsz4vmrjPFafPuAan40VVu1ENe7gSrn18Uax4\nrJn2HhzuxpfQIXNy3LQ229NUqos7xv4hmzPz3eybJS57BawoNTNpYwgDohKK\nULY93yjtGRYmYkaOKjf75Uw30f3lClpcORW7y+tDeycuSYV/i90IgXs0DM5X\nzJZ5X1Y/gwOfg1+E2+qRXSY08w6hF5793hOrvDjk6y/y7uBQ1//S4Hdy2MZy\nc7RULKa+jtdGoOvq9+BQgJb5OxqhXv60sNZs9axw6Q0kHgAtOthLdW/IIsC7\nCc0F\r\n=rUN+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCD7RURbTHcgyVTHhhaL0vwThLsdumhkms60TBOlUzbwIgYgMwPfJTBudlgyr/eDvOvaZGK22L1Vf4W6ONb2PGY4w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.2e26e137.0_1609872595125_0.5270221699289772"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.9009f6c1.0","@material/top-app-bar":"=10.0.0-canary.abdd10065.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-oHOntiZdrPwyscFMIpds5bpoRG7x8q4Hj3i5g1kjBpJv8qkqMoiPJXJAA6fIgxMDvR96eSv4/Ic3xQ7d3OJLNA==","shasum":"356a154ea5a9483eac9d1c084778fc7648edec2e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.9009f6c1.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+Lh/CRA9TVsSAnZWagAASfYP/2DXsitut3LSFwtPDLch\neqh8eP6CsHh1ZqMCPtW6+cGDdHEFXhKiJIsbc2cYzAQlUB2fkbEf2dEAfEvk\n7HFSv2X5El/bumSMrbIE2UupgeuU+tMwm5MatN836NiXwc8mjnyduPlRyERe\n6It+7zgR3TpJHaelziQZYY0XiuraVNHiCRR5w2KyD81zxvVFvPPXg9CcdFtN\nD0u1L8TV9fFSc2++dgJ8XpVNJoOxxRdLmlSkxLDZMDYNietaKaG/+mVtJN67\nukne319iHdocJBK3h4HD25PCjfc1HaQnzSH33ffvZTL/SCmN0iLV2FnMRbWB\nO4h8vBvPac6K+BYq4jBE8+PuVS2g0bIZSHhMGf4OjH5WzQUBj4JJf0ly6MgN\nfSc2sqlITDZ9Fkbc8Q5Bo4aefzEnN0zXYKb5XMOYAM4zSfftSk2J/Ac3Utpy\nW//pVPLO/R6YMEaEveIdoXG2pr0/UJuTJtZrwyV+SnjFWbUiX48rbjYocMDF\nALBwJCZrES/qqQKH76ho5tvky6i21E6Kj3PwJC1qW+ktjc26Ax6msdj+8sqo\nUPMnmQydsSRTZfuGWha/epCBmnIPChDEeK2Yb78PSDEoN2b/obJr1N74EwKd\nQf3CHtrxplwpTZTb9DmO0PzhHjs1bq6lXFUm1RA2HA79Xu1p9My+AacQMgJT\nO7ug\r\n=6nAy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAmUc0pHw8QcwnX3oTQIO4oEAityOsUWb9JeR8+VQj1AIhAKyOgS6E1POoEUOUhhVPyJV8O0dMG/mTZW4tNUpPqOIY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.9009f6c1.0_1610135679509_0.7772320543922286"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.ee99b646.0","@material/top-app-bar":"=10.0.0-canary.b8a1a58e4.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+2aORtwvDg7mLf70U9wqIMbhTVQYZYvD8RljiWbVBar2v0ZyFS3VvNppIL/QlMoRMi/Cr68G9RgAHFIUDx0AFw==","shasum":"05d7ac6ad383f8df6c8b9bb7146c7be077f9e816","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.ee99b646.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/NpvCRA9TVsSAnZWagAAtcoP/1nneSu59/SI2XyJtRu3\njSROyGFJLVbAsmNHfgfg1MthR1ob1Q54SUqccZxtlkCMY/0JfOuR4rD/x3oT\nuTIW2PmDXpahAHrrolP+acienxMVKoacJvWQSF9Zlhsm68xkaRyKW27HPmiQ\naST0kxW1qOqmJr+xzuZxdMEpcdmE+z+g4J04eoYZj29jY6fagRItJVAnGClO\nC/habsNRqEZKxithztufBn3XcGYDE2/gDRAkI9HSApFhRyhVeeJFJBFbgYMw\naX+HS8qCwiIMMJGbrz6a4mbgpTG2xh3ZZUwNbAJefFWSCkxIkUwL4Sy3JDmq\nJlQCCwVLCEsNBJ9BExTfGaGpsqempKik0tMgMPTtP0cOHFa6hOCIap1aqWWV\nlekCqPJ00mc2Xja+GbIHwhAq6GZA0hdF9tBl4CE35k8GMqLSqkUb/4cnlD99\nY/MWRl1S2ipxc77suVwz/sMjiu/7q9dZQZLoK5XImDWtGXk7iblCiKo9e0fM\noRbabBiW7AsAII8covtn7so2JsJ5rR/xMV1ymR1ib+1neG3hyBfmJemsJH5H\ng+kjCC3SufPgVKQCYO6N7ghJVrH2s6adGc7CqqjyVe73SJtw3SvNIOga3lAI\nb6UShRbQ8p79k/7ksHGLMUGystMp90fUvKD3uKMq3yteqrYyx8KemlB54IfC\nFa/V\r\n=kyn6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF0kbzPjJAoAK2CWSWChs9DgCJHYjx/ibW4y3QK6Twi5AiBuoyiu1BYATKf5PJ7Jn4WEEF2T0L2cxWgO3FH5tLrjQg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.ee99b646.0_1610406510910_0.8821538976377448"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.740ed33b.0","@material/top-app-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-6sSaOm8GOhN+7vWG4rskvX7luffedycLL7MlX0BRdUHDzDASf8pTplSaQnbKCpdW0oCWE73pRwq+7BNTdMbYYg==","shasum":"38666ade77f7af02106f6e8ccbcb3d1b3868ec99","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.740ed33b.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eSnCRA9TVsSAnZWagAArvkP/iMKqjZ1nBWwLE9befOT\nhmafl6MoTkLCCvK6C4xf7NaSiRP2a38iE1fj1xoXg91KGr7oxmBDfv94gDpe\n9998y+DQhCXYdUe1j9qLfQ65TUIkHGTce7ae9pkCIpPkSC45E4OgBuwOeCu/\noKl2ROHgdW8S3vl4DroSeSImjiIwKGpg7QvA30S+NQqyRwRyeMlCph2T9rzN\ni1nyAxkvkosB21PTOTyFDBlJAzXKMTQhHjqAO6xaxpyTNPUG+988VHwaIldE\nteRVcqwm1TGABFF5Qz1dWNplxonlw5+f0b2bpSKCSee1hYegcuiQEZ3NU5pl\nuGFZowCnmCAtMsGL7dm8N4Eor2JKdVbIsljQ+LHvQrBlSwzoiiLDA/PfFQYW\nBcI6xnAfg1ZKcTZDLSUenR5BZtlXkJac/Gq2785jH1QFmU0k796oULVkTCrS\nQYzq36YN/08WKYjw7Xc8OsHKq5QGeW3A34JX+MGaDS/GVof4pBccGAIZxiq3\nuxLBYiE6JmjgxQNOzttCXTvju/qEovqK4OvX9w0nTOf22tOa38QACaVtqakw\ndqGHX/QblVR8Bz9SJyGgpu4qUMcTjwXsrB8LXVToT3j5XdCyxKRcjRVf6LI9\npzQcQNjircYZi9cTsw2qte8nhuBf3GT7g9jY16lJ4ZJ6GugmnxqwSPxyE/Cv\na5Eo\r\n=w5pU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6k/1e2Z+IMFFSlPyJbe61txRqPFZQ4JSq6A/9PHfCRAIhAPSjyy/kKiwYTqFVq6XrZJD/iZRnmKPMQrb2XMbudpLv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.740ed33b.0_1610474663076_0.269174159959618"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.c5c541b1.0","@material/top-app-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-TV0bW0uPPi1p40og1wLkfi0omuTq8ZQSLHoRiKcFFJrPXoI21ORkh626rgXEC5IJyZL6OK3+ashyyJ4W4/ubTQ==","shasum":"90573ea9abbdec64f906e41a126d3256b58b998d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.c5c541b1.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e5fCRA9TVsSAnZWagAAOeYQAJlrNQeDpYT+AO+Au6lF\nBJyaX49H9d/Flvp/okDRckP5Jhyhw+nc9uSqun0FA3WPHhcF9tydyzcGTk6N\n7UPMsc+cg9DAZ8bosKbMT9jj7b4t/+99gPdkLXNmiVS3Yv8Sh1LJuLlAKi09\nPnmhYyGbgyBRwjdhMnY3LP2gLU8iy6rNEKXZFb6MaxUA3OFnpriA6kFk3HgC\nz0bxOpzsMH6L6/vwp/sqmFtzWg4CAdiRqB/M58Mcv84f1/ppQnLW6GkexzPL\n1H4B86MAvTg8yT9K68KyOugoXlO9blMBSqu/LkxfZ/XVncaz3FRkSL6HLrK2\nENSiRApSf1K/OiUdzi/mY7tFoj2ppISxCApVRwb1lYFWKx3eyqyAFkE9Z9AU\niuzbOK8d6SHwWpsMXSqgsFJzDkERmzkUMqVWHhj2dqEiA0gMHwsoQDARPgI1\n3FEsI4LNdiYuKUM9+sVAXuz4fELKv5lb+Y7vavvnfSLgluc3SIlj1a1s1FxF\n+oZ1fy4LgxrpTtp+9zAxfcMucJAJG0zaK6OHJTZCVVpRrhX5CGmcy1zy7DNY\neLaq41mY5ZjS6/tQYOkz76fWWhZiIj9HraeBQ1FurygoZFW3MEFYZNR/oi8r\nwYV/WwRqu93tFvxv7a7hdevrvXZMmMsV8SQswhNuGmGF9Bu6SS86z11uKl4l\n5C/e\r\n=nsTA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC56CspGfEZuUPkj3aGJKyKG6pyVov1gpMdTDSRQP0BoQIgbQLle+jpJbMHqvUSh9sJn7IvBsFpAaYcBF1BeO6E+OU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.c5c541b1.0_1610477151042_0.5210108384717955"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.06fe9d90.0","@material/top-app-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-vEaVPm2HbktV0Qx/X11+SPfegIA476Xy5ifs/TugXUKK/rw8CAnMlEYpeoxA8Ikp0egA4M4wi24BHEwA45rDrg==","shasum":"1d87e26a94c0e3e1caea8744424905c711a3ee2c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.06fe9d90.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gy4CRA9TVsSAnZWagAAuFsP/22WqJa1DajiLTvP/h3e\nroBfvBpAwnhM5MT7qVvlZoBwkownYrK96FTwmDce/IJNsSFMQWEe3Lhk5PY1\n07L4Pc0z7UmU/s6xHM2lWYXGvfKn4Ti5IU7W8sFyvxT961pkrKfQtuHGfNM7\nKV7rZdlvQN5Ww7zWFp0G5+BT8uJgse6WljeZIX22ax4DnuHywz3aNAJPSpow\nBRh6RAW8DftmeyrqmtXoAXJAiXVudsN0ug54EmrJ6d0Jy3IF+4Jkn2gH0sLY\nsbUpylFMcIWg6HOkE/ddJjythoAtUomPzI/9Zvgi5OUoa36xVUW5bNJVxeQY\nFqbrAaKnU3s7ulw6hndFfAddjHxT/ONVlCDAKQxwQdwYnTHE4X8z1KhKVl+5\n6TsY7YRgnA1bPU7zvjGntj9d+/togOsNDGWYVC8LgEwsujGpnv0qaDa2qJQM\npy6LZSCV2nPfl20cWKtH0l3+wCs/BtxAFEKYgJ68MkFg4bAsMoin3TY1Oq+Y\n79OcUEV1A99f9pXcQY5oEFJ5iJYZ0MdzHgGRBMmYSwCBVVifXnhH1mD+Pn7X\nrBDP0C6owQddMcNy8f5gzTPPTk2GJjushbJc8cg6Jz8A3/1zqcfWxihilpdW\nDirOtfC7ADUb/LrNSPLxnpc43e8SMRpua4PkP+h8+HiocP1ItA95/KbpBA6Q\n5x01\r\n=PL3w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE0f3QZYNgxuvaexstN4r6rMEYwaq47Xfzj+QnfzoDaJAiB/YmgnYqmWK9erkvBwiTaVFpArSkSlY4cQxUHREHWbfA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.06fe9d90.0_1610484919629_0.6435752087128941"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.269eed01.0","@material/top-app-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-6fpyBo+Xs+leiG52dez1OaF7+DpuG3aKHwaTg9I6UJqIuO7aBEv7gp03N+0+XIOB46AGD8nqHr2phCBAMFiPow==","shasum":"0155ac9180e8a69903d8d84497b83ba2714bb6ef","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.269eed01.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2n/CRA9TVsSAnZWagAAs9IP/jEBOK0qcg6G+nnlCp4o\nzmu1zS8yaja2ir9AjQ8e2z0zICGi8rJaZuNkJM0EjUrBkSTi/avK5XfWwgt8\n+yPGnrLI0ImGxtoB393oxiUC2qxZneYeiQlAEK19VB1GdHzLmPrylBXZ3gZt\npkCil4BNOty4hVZsR14LU1GItU51X9jdgxsd11UXnf544lQ8/klYBXBnfEhg\ncd3yzU6b64H9Dal3If9i/uno6agEWmZSN65AbYNv6SgTpvU3yF3YmJPQNjIg\nZv2VUrYxBY4SZtrNhTq7YvAK4lcUGnnTGBrD2Xq71rn2ZWpSwkhoUxTAyas+\nfzE6/z0+vvpF6ISPs9RH44XN6krvdn4R1CpK3AtSAF/mydTTEZ/WukPsHA6m\nhT9qBRomzWk/mkSczfgcnG9KBBxX5Q7JTbbgsqFxaXqJqWG4JglBep0H2NUg\nBN9tEM0eErCi8VA9atXj4XMXS5NItx4007iY45FyB12zG6hK4sn4+t5mnTzS\nYwDFSSAX6pc+G43iKULanejLxx9tz7EAXeTvnSCK4wqtIvcZV7wxQUmbMb2M\n0tBcJS/z8nE3kywnmJ9wnRE9hiJgDrnnp+Wx9pql7IYBw1BEnhCZJT4NhAKj\nofkSCaClB4yVygCn+fUpLDS9GvLkqPu5pnJWp1QNSFEAs3Wf9Vg21zDUHJF2\n29ol\r\n=23id\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBftriEgmb09n1s0gUgc9y0m2weAkLoFIxfubtzTbb3zAiAsbPxZ86cwkP3yEGV5bwMdFhcPO5LAw41As/hur8KQkg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.269eed01.0_1610574335265_0.07340313172561164"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.8c075f35.0","@material/top-app-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-O58C/oeVTVjan5EQt9C193JIXOoOU/FcUdBpiV7u3jQfapY98TBIB4N2W4UeSvezYEbG+elXVxTYLqDeVWSevA==","shasum":"2e5cc69f47ffecc45fc92a2ebd9d687eaa861ed2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.8c075f35.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/30yCRA9TVsSAnZWagAAlt4P/jU70mTs30CCIW8R79i1\nV0noC1A734LKm7KjIFqklvkJqMD+/Ee1iug5tg8WB5SY3wJqiqLx+XZmKrDf\nTs92OuWmd4g1wFVYojERj14Xy+NlxIAg/O6G/Pmbn4/xT9GDVf60cqG058Xt\nTzwlOOX/ZJPZJoiEe+C9IN2CVTnwHO5nCkVDtVBDxHBIzMvTrhBqnLobfh5q\nFR1OJFx3ywHYtGA9lwAVrA88V7r5l8ljJUHEf9tThggEr/ApxBYI7E5xKB2g\n0SexAIPicOrSEH7efUVEPoKu09jWMBOwvR8CxVW7vlADtIG7Nmz9qQgHOuPD\nJdXMrgEdiTs9Xd3WprIQA2nPU9VR1f6U2NWgZFN5xJy4f/t4Ml8dGaVqEj0u\nxRH9cpGMNb9mxANhJ/RVtcxf3GNmbbtSfRRiwLnzxomT4Oz446NVs0ggtXx8\nLgqFmJZd21BoNYOPv5DU5LmqtDxCYtuCK5w3TvR/QCYmZgIZSjHMO4i7VqeI\nUBQjFxB7UjuS47iHYiMO1vr8mdUVsFeLAOEsfh5ivonRLqWVz1mSRKGlpeK5\nzMYvBOcE8D/I7VMk9NWZMgNBesWylyfA6OzfS5D00LjO1WBRfnyC+yTXv/i0\nhZNNiRg6xiZLlF1LnVKPX1YB79vdTxOiysAl+2tpqz4jd5kVlqZjYYRsidiQ\nVEsK\r\n=FOzg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUaw2Lzhb6DVpy720pmcN3G8Ye9zbubLFQiPJsskJLsgIgGBy1XiFT8KVlmPfOskQFe9EHi0balZmG9/ug3O7Nyno="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.8c075f35.0_1610579250266_0.02448587214134701"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.3cda381b.0","@material/top-app-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MYnjh5HFccLElrLuwJBLHc//1Jifz7hqDQk+yIHTqqztj7l2Cd/sxhEP7vi4lpmqIBgUq7N2lVZtgVe7wgLdzQ==","shasum":"01babee2e07fa14d0587f921e55f2e2e3aa9ea17","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.3cda381b.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4qiCRA9TVsSAnZWagAAL7AP/3Wr8yUASgjlbYbll+t2\nj14a2NRv7dkiahMnvN84+l5j6GYv5V6Si+VMqKku2cfxWEUCyIweJQ9IZVBy\nTO8oMcn3j5iqR8IZxIa2Xz0bSSLAjXWYEk57qnJw/gB3cCf11QdBWsL5QsBO\nThfPa3Mv3fy8MTQQTehuShxR2pXOvLxmtGma+7PKjMiXVrGgofFquHonntwR\nmdNwrriwa2tRZI7FSlt5+3fSJ1/wsI+rpyXMMjWFeURgIVbnorI/II+BJ1Rd\n4sBziaZIym37roI9/bpKs1gdlWiAm9mbij9LrGEMdL4HVk+L3FXbU0XW0ETl\nmZTSo1f1XFSplNod6Z38L/mitzePzLpozYRd489jMIRaY4Dv95UsB0eo/JOa\nQg/cxkYCf49MdU5BrKBQnHbl26ayc3DhJJBQMJP85ROmVpYgPUBT2iBK21f0\nFgNuD+PB5VixghFlwYBm3FD6Buclzld16hY+s2iVUK+Gf2VaLF/0KuoK9/mP\nFH4AjWJweJOoejcxKpYyJlgkluI5ehjqCtK0x8ERAXiiTB4VqaeX7Q+jTVpl\nHnV0bsMFbUYshsDh2qmPyiy+aIMDb57wRKZgDZExTuEOZoDwQICWR7JskWeB\nwP76RTOcjQgleUcvrdJ+anh3IBxogQinR59vcUIDhJO3g5nJ9OrvmA+SShyc\ntcT9\r\n=deAh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC8bInT+taobeJnwTp7boHkx2ePAH75M9wY3YqlwK6bEwIgHIqbcvSuJXvSPLmj4tgMVo3+jCgxIaP3FGIF7IbOxSs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.3cda381b.0_1610582690296_0.5983505171013117"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.bc113605.0","@material/top-app-bar":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-D/Y54yXNYWlbNCp6mwHFzD47EJ+goa4j8hRJKIsmkDZX+vFjmgheL4FWSuG++ntORFJW0WIZm+V4idCyDEJ5fw==","shasum":"8a791d290e0b1bc082c384297a52c5eaf0112abf","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.bc113605.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5Q4CRA9TVsSAnZWagAAUGEP/iskdXWwucJ/iT6WRhxw\ng2tMYDSc1gZQmvKMLEnoEC4PzOZnOOGtGRfF4/zhXzSyWZ+xyzIVwVvTBkKg\nQZNq4TQV5uyqbJ4yppB8t+e0DCwIPtLwoGsEpRTt19TbBLGGVJjf71VAQZNc\nT1+F52ct8Rij7J62ksKtPTwo+FfTbgeY9VOnxbqnn41Mx7glojAArl+Vx1fB\n2Q0kgiZUakphq2l3BHjKQ4t9H8SLyVHAOHcIpTayilLE5aS+yp2hENftweaM\nPzfrlOhPscaiF5H63m4tus+uX5zqJhX1H7ldXY92v/dgD/0IvTqU8EbfK4vc\nRihIL+dT7+8KXB8BwpVS8dIEDTVv12WUaEZ+qopPrXrnH10W16XvY52iw6sD\nkfiDL8wHjZrOtIv5spmTCYg8IPrfhelYvaZlycfHAhl3VJzDsmYSHejLiylY\n3ONjODTiZPW9Qkp0kOIva6GdhOX4YV08B2nmypb5oGXSGSnJLvwbQ+tX/9LI\nNcMX3xPRDsDkYiJKmIFozhhZZ1cFmej/5nv1Fek3GrUx5CnUcIbOrTQtd4fW\nbAVIOq4PmyOST1S5E0ZgRiAKQhs+wP38jupCvBOskIzl3bgaXkDOQxugmsl8\n2xhwBkkMxlKzktwXxwD2RGIBiBOF1AyT3RaLiCdW/BPX38AVC720O0HrLhgw\nD0Yq\r\n=DwDR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHh7tfj0R3saMZWmtO6NM3PwI2XkKvxbtNOnoQWTpKuGAiAM/m0d6m1jUIfv/Xe1BxsjMeChSB/0RGlPwYHlrt0z0Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.bc113605.0_1610585143720_0.6080534359130423"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.0c1d6ff9.0","@material/top-app-bar":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-s9sKbC3c56oxk87gXo4TzWHFzLUODnn6RL+bSUbGLXyJjfK5mBFQm1iVUZE9I02rL5z2bzuDF+YX0eSomyzDyg==","shasum":"5c27a0bfec2455b5a27fff0fae5ae68338ea3ab4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfaBCRA9TVsSAnZWagAAzmEQAIkBqQEafbs2R5f9dBSh\noMkAZMn7eUNKZrbfFfElFtmJcP045VYjqX6yQNnu2pl+F2IU8PRcuFKdXahR\n0N3KetdXojMmUz6Qd3aBeRxk3J7PlZUyCLQPFPiTOrucF17RIRyVLByO5i80\n4CQjJyAaZzyB/qg2hrG4V0CpgtHLl64EB966+wlmv6NoR84SGy+9i0DSuZZt\nZdlrtiyPq+iWDq/C6/yvcekXlZrz/foRZEXa0A5p06Ek9VLDbiMpoYd8Jjtu\ngsEL5XpoZNrWKHGJmrfXUGf9IYrZy8FMacWckiCnHox1slfTLmlLMfxG/4QT\nMDQ1T0dhSCeg2GnMK7LnuDpnayq9HoGFyCKOstWz4WKQ+pxw14GzNFYLOaut\nvfrg4dfaskmn88VtE/vGa3ivHilWhLdy+1wKGD6OR462eJSItcv7olfWvVk0\nv9U2S0IoBhuto0vCT2dK18XclarSIgb+DrtrYiujeDfsNd4ubn9QmkTV4aSP\nFwHFsVrbkLBWmfqSXv517mAoWaBcRSqnGGFju3Cw0AblqSy7UIzFd+SqfAZ7\nvcTQk3NEnsbL3Y0e/kNbhqWFQLOuIbGv/bSi+gJ7fvlR/6ExIvda4UZoJSaN\nGC69YyZ135rMiMnSmbB1LTK1I8Iq6AjKulHOAFOGehnv9xTb0fjZHzHvASgD\ny+T4\r\n=PgCJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzP0Hz2HZjtJpcwR7TFz3+CITAaJ198K72LmlesFr5qwIgZv9UVSLP4r3wbsz+ZlHA5g0ao59kxxpUAy9/kxlpMag="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.0c1d6ff9.0_1610741377460_0.9753657975532286"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.b4332e00.0","@material/top-app-bar":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-rrgwdzoW88Ga1nbXwIgrWOaO3WfpL7co5wBYlsV8VLk0CtcYcvMzYqF5DVkkUxg4wI2TQD4BUSs2/hzgyU96JQ==","shasum":"c4fe3e0e19e630014db5ea5440f5df8e75881baf","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.b4332e00.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhIxCRA9TVsSAnZWagAAmocP/Rg3/ZywsQZOxrYF8sHg\nNr3pRQMp7QC1NmJ/p/3IYH4PEMDmMCSJkCfFqv8LECsvZo7kmkiJSjkjLZHt\n4PKB9cvEsdETOuKnsmUSoUDiDyj2HDe30V4GPWDXlqYNomDKjv+a72guEf9k\nHNshWQmF2ZaDWOZ1dFeclvaN9gENyfKn13pMHS5sHdsOc3RbvNtd4+K8roxX\nlXd4xd5d9F67C/YtPduLjCcFmFLK4Bd+liAZfL+QrLdCNP+8YWXixHCTk1RC\nv+JJe+jTMjVPzg5404cLB9oukHTpu0on6uo/7lPLxCQnoXTd4AEI7QkEm6Hz\n95eHiprrR3pVFsTQt3GD5+vhwlK1p35/bOvlvhBEPvzx6FPpWV7O4vB7Teaq\noEg32YVItJ5Y6t4UOdHTiefHMz8gLp+tW3eDAbjk68eF4va5T3Gvrvh8JfeX\np20Ub4949/MhtisoW//5e6erfy8iW3JUJ0BzKd7qYrxgU2+Lh8tpwhvJreAH\n/BtDv50yrA4OqpDBCmq7dfJDws2vGswm5Rd/ZQiQ9Tl8H7QWyiRR/xCbRCEI\nB2cbz6wZ4DiJDwwr5XMTYzcRaLPY5b51WwiCzkJKrjglzYct/vjJLxOZ90X1\nO/Mr+Q9aMGwEZ5X/qVRakRwrOc3U21+2Py12jzQdUtAoDxhyUeBli7DzKj24\nI+u0\r\n=zVFh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGxPpVRppPRvPv8Mjz/iEriATkY5a7iXTrpr65JdgLbCAiAQvXhMSm2iJwW5B630G/FGJgvGqzg/Q2KHDQ+AXeSCiA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.b4332e00.0_1610748465062_0.042504785304043446"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.2899691d.0","@material/top-app-bar":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-wGnkirjmI9+iJ0Qw2fTKomas9VrNPw9btI9TF3Y9uE0mTIj4Mb2S/Id3TQTvRil/Slr6MnlOpFzuDODtIR/MDw==","shasum":"9e0d27faaab529fcdc806870d55ad8b78f4fc699","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.2899691d.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkUYCRA9TVsSAnZWagAAhncP/jINnk7L3HOxfdcsJnVv\nHoasUxyWGmEHqusD5Tl5e+8jKXrB2fGh6IZf34Hkzp1COnu0iwnnqKAnTl9q\nBGuGzvBQZCM9POL6313Sy44+5V2IYMDoY45C/bQj6xPcWJ4sTpWTe7/65Grb\nHkkD8vgBk5ESzAo5Vkx8PoL0mdYdDMtQW5nanDnEIchWjmLYg7teHfyTqLj7\nNdl6cMVnJSSfPVEXgwJFtm8rQ/RanH4gFubwwmZmTkwap6MVwNGeOkkMKDvX\n+fEgpxHNHES1PTwQO9dFnVPENO6RAXSdxjCjL63EH71vt6K0MGx4/25Qz8Hx\nhtW1X4AYnzxwUiqiO+esgWM1RAJXYOITOyP/gr6uEaFjcOcUlEXNFenwbWyr\nrWiA+YSQN3H/0BK84Kqjeal8Z7QZ5jWp3zn/vm3gbxCMMU7Z3tu3LLKatKlL\n/uKUjK8x2aSSmNfyJ/+KEgOnXFS+ZaYDGZhAHLeuKSPyPs2+M1wSWlhISjKk\nxwrdsKf5aYd/5MEkyiQ7EVEtk7vqKhM4XcDGXU5HA3mP+arfc4Q7MaguxKHV\ndViMjQIwYDY/kiYYvgF1KFj30+5en51No3nbWzECNQPuFg5yBXaK00l9cyT1\nA0784hdfKMQJ8IlqDWiNHZiDees1hxSALRlfUenNA4Js/XrKHE1uPVQ32MUD\nQB8N\r\n=RLEU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDA6fh01dAIScx+gjRdgiIJz1fqzEFonOTQBmpKA/0RYAiBd5s88znZbyA2BroqetSinrfUjy1kit6TjfetwKl7aOg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.2899691d.0_1610761495727_0.9338013384583217"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.fe73953b.0","@material/top-app-bar":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-dGbYjYBsr2vg3tUb0jX/wxMDcx0GuY/G2dCQKYUk4mwkcAuowb2WAbj19ZwR7NOMih3AnjXudbEe5Ge0JfxJSw==","shasum":"957b9530a1629a4c151ace00a43723d7c0d0264b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.fe73953b.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzFHCRA9TVsSAnZWagAAfTUP/2b5ly7aSp3w9vw+9Jvr\n8Zc6gyLXmz4ejeCWByCCRH2xbiuScXni69ScnLQzXi7mEpw/eutSFmgetx+v\ne92goQresmZt/BFlHRwQpfROrWkEFrwvUNIUTFR3mbA9Owp14Bc4k+x2cLZt\nLlJTD9Q8h2lsdj27U9DvvJb1DNK+xVPiMReQnadaJCnQYsrvSMi6JMriZcG9\nTlvNVzogL0tifcJ+gkJxxndTBOP7oIcpVCbyJTBcaLXgwf5IdIOP1yrwcgwm\nnObJiU6N24JrS5BIWb5SKS0kP8lZG8Hen0m4GaCJpKWvJfJ7kaMbiMCPcfhX\nIRYfmh1iQ5OgR3RlqtA3dV5btk8uCvyIxJnBnUXac+qDGwIs01++FsXcFbfI\nym9qD2nt5ACimk74Hxi3lCOnn1oP3fkZKyJZFdcIAOu815flho4TrdMOmh/i\nVFKE7u3IrCiK8MGYzRKGj2rZkGpHvl+bvaWlS8wEqk9bL1aB/QkzAxsD7fN4\n7+pwR0gGKd33nEuhOefA6uMINJlxn6WD+0ILsIjVw1C3cZQAjzSyIUzur80w\n+ZkN9YbEaxVsNKwppgs0ON5KwBVl2bJ6mKckyaq4r1buJs8dBWaIqENw7lWf\nABYk+Fx1/nFtMXbg1Ezee9mX2kcTKgduMkhUT9jLBsc7G6DGCur49LvOBrdd\npchx\r\n=ZeMu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgY1MxXm3l0CBGMgtu+Wet7ob1+YsnaT1M13aHWN3RygIhAI6uvlDpsjOR3Ybh0DlLeMTWgZ0RgDvn82212/z+ut9H"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.fe73953b.0_1611084102719_0.663653516411141"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.d3a16455.0","@material/top-app-bar":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-T2n8oQ/xjdcatOh5fz37Ce4TS40InEdjO1728OQXMsM1ZVhsWHf3cAV0pF4VytZRaEwP+nR9NhVOJzt8m535NQ==","shasum":"5f8a2f1a79f607c12935d0054c172572648e8d6a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.d3a16455.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBziJCRA9TVsSAnZWagAAmr0QAJJot6Lr7cFJmoN71riO\nNN6aJCvbUegdzvLPqL/ASWruehe4KdSK6filLsuQNS41O/Zy4QhX4bvuMvxM\nSjUpX7Zup3bxcpmC/YD6A5gyQ0N6Dx14Q6uAxrXZmgHgsMZhW1PqQ/z+eqYE\nLZ5T7bj5WNDfaqC1BcxgQ2SYI5vJ7otaw3HS/cMPJvgH3BazVNE2B9jfLXTV\nOzygNZT8dGKPs/lz3UeRqBjo3ZUMf3y4gar4PNE+jx2IfRxe/xdZKxUaFxoR\nY71Ofaop1IFndIsPGkcJ3fE0UARczXFbQuXyji6RLhIrQQfvJ86H6qzv+KHl\n5od8PQ5z5mkkAcV+gDmjZlX6OuVENMDSpNXPSBxwvjH3OntakXaZkfOHgJiX\ndevSINBya42xGW7pMAoKHmwMKxXG6e8FOx08O3Ia/s6QTPE8IuRtUZHssCM3\nUMnI6LNAIMPlBH/t5ogwDWZ8VGCcf44ne0BFS33W1boQtC1MojGDr3ltEEaL\nLTcwvXhXmpK34yRWkv1XNolzulFF+WfoTPokBa4zx3tQzh13HjJTUp5LpF1d\ncdpQWmlGW7Sh4YHbm7KQiRM5sylMUya0T5fC5t6yYkYeCWJApqcTr07JXmYe\nqFXVjykpg/OuKF/S5qb2H6kVD+1hr3YxndMr+7VB/Hm2UUgd2zlEP9hHs9Eg\nrqiq\r\n=M/0a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCx97KMTu/VWfMJJBrDAU6KqeMfIb8kboqUFU1VHU1ynwIgZi1gYPaMsLQUhhhpohfcUZUbyQ0cOtGf5mKJvog2Vj4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.d3a16455.0_1611085960741_0.5214368802423399"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.597ca1b6.0","@material/top-app-bar":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-10+VhtPFXiaK5buWjVOyXkqFNmw4Yar+1gEvkENuJ8AlVlyZaab7B2gOlT6xo/7i3KwxEkAxFhwgh7b6X3FEDA==","shasum":"bdb31a42591dc8bbfb5ddf995fd20fde791642eb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.597ca1b6.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4ChCRA9TVsSAnZWagAAZiYP/3+UiWfutjVApWV1WmO+\nr1ROo67nH1mVur484pVjLIVNkRWi+8ZxGeS0Xjl6LNzAKb24rndIF94Ve3/A\nRRZqGhQXqdhI59UXnJmWvKIuBfubQPqhF5zcIt2hE+datdkWIV7qoXJZol7/\nSardhp1SZwhqq/AL9MX6oqjxnWGL7eMtRmXXIiz1tymKVCz59CdFArWERze9\n9N+Sp/CgFxIGmDE/bJsLhcwpErboDwlfnitQx2hY+Y1I6W6BlHP4pyufDGwK\nc172FMOP3loT8Gs251hHq+RX1U85fzg4AVfu6+qJdJenSmuYRQg8ZuABpHfm\n8q4XgLcU2iXBwhxAqX45CK7H3CkaK3kLwY+tZQMRX9sa4bmMC6SsOatrVvFr\noGS4N/lb49IZ0XE5Mp/GH3lyCd5HdrNUb2hW/0wiNFGRPkP5dZUBBjqvk0tw\nPIR0ED6IbQTgUiKcsCIu4xQEk3tegdR/9+TBd5LaopceCVocJnvRJwktrXYV\n/WfrP4IBHyhDA6Jj5VSgmcZcbpwHJKVdFJgGq3rK5DoucrXR1OeeVwo6Xz3V\nO0Aykpg0gxulAs7tk9aqrr52jP0FjhAdgHa81+LLVcRUOoTZSexh/viiVVL8\nOPjhoGSp5kmzHftuOjKVMpBtgYxedYAZFW+aY0HUMkHPtUIIjXpJON+cww/R\nyWPn\r\n=N8wu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3ED0UEcvUIz9uI7JEyxbBlC2Fc9dzdYyjzU+M8JF+AQIhANxyLldj1lZEm2BMwY1HG+P6LBEqP7Kjdny1i1pmd3II"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.597ca1b6.0_1611104417440_0.7697789833467175"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.3c195efe.0","@material/top-app-bar":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-tFWxddXs97lJHx7VVY4usb4EoNSr7aHmZbTyXNQx9SO+ny0pq+9zVDfzFJlsIWMueX2nvjmihWobrJWcJD3yug==","shasum":"e2820a418738a6b68c90fe760dd326995e84eacb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.3c195efe.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB48NCRA9TVsSAnZWagAAFXoP/0MAXEmhNugoyUyv5Vz7\nmxuva2uU7f1yVwddw/xd0LW9HOQot5WeircvBdebNRSubn5LS1b6121U2nUJ\ncVPWS0cfUriARhKAJfQVh+rn8i5bFfngaSUq2G/8ZSRK+pnJcNtL1XFIXpVp\n/ydwYbsDP0rP0eJog5rT03vQSAFCtzuUrEWyDxR3LuoufzCtAA/a9otL7RtX\nkFPxxcPZjlFLUmlaGXGH+1opat/F1ReCLuxltt0PeYhX+OEM4qi17uweEZ7n\nsvX8vPsumWp0FUcQwsQPjDsEbFpVLpGSK+9xsz+Vfdx+Jv9+8rn/cprLU4Hn\nti0C2q52VAbpaPzendf+HZbdhLs1Y3MrMnUIl9u/fj5hIUXjueSrMvjO/KGz\nxHi2l70QcDYly8M9Y+YgBzdXISokSL4qwiZaYtSj50EqjarG+n5OdAyy6OzB\ncqq1lMjFXkBorUAIMhWMAvQb+lupyKGegBw0ibhH6sg1mA44YZAwl7WCH1xu\ngoWT5uw7F0BzgDtm7huPWXi37LRlo5clp++n4xR+rWaJzCj+zN24tIS4eVvs\n9p4Przk3Y3MRgVif9Qy5WU0BpFb9PAm7fq8Doq01hNSmUIHJnBHmtwL+NUP1\nSQU671DlHUzD76w1HGAk5IxWMM2bD/DA0zpO6qr78QR//PBXMQMTmNW+JMMv\n9Nik\r\n=2rjf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFaFavZ2RjMp14PpTVBWpspGJTiYRsq6WD9rf5ENzDXgIhAKcoiw5Y9el5At2b2yTLyk6Rqa19O5yDqcQ8hH5IgHzY"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.3c195efe.0_1611108108608_0.6505857346807293"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.f7b8755f.0","@material/top-app-bar":"=10.0.0-canary.0c95c9f7b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-cogUztqcnMuyq1f/tej29fRh7pFAlV10eWjDDn/HNNucoa/oaKFggCpRrBZ2ldMR5nIZUgCcO9Kx4IhRE8ZgtQ==","shasum":"22d8cd0880df705df10195a0b543d9be92085707","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.f7b8755f.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJSqCRA9TVsSAnZWagAANv0P/1gQXblgYHNSDV3acK6+\nXVU+/aTPnA1XWLlv6HZ5ShEx7DUB3zTmNLbQV+3RM8243fRl4+yzQB19jph8\nGTeNtrzVGGyBLMTEddtEc83wJ7Xef4XkJ6wwXWAcp+hjHWtvFcueyHQT+wSn\nxOW8EDpZdHgiHSj5fC2BgGR6/PxnTwj6wTElmCYhmDYzCW4LT2zhQJYIObVJ\nlG+d4hTof+jC3HohcxaklGnShXSII6p9j5C2999Vx6Q+CiJfYUHzGWP4vHMV\n3dQodeRmJ/UeFyF2/cIVJrnt66Y/2Ke+mrhVTIKtJtOc2E02GLBJzP6z2Fj6\nLLVZpxUWCkYYB7PGrFZJdU3I9MjhNu4heDft0cPd7jFsWRLup8LHSZCF2Tp1\njHgUp5js1V9h60hA6k8nBbHE89nBSOA3H6f5Fabz/jCLARmJymEqOAbnEEmf\nLlwmGcT2NzT8/3tLAALyq3ufvD3ywUk2/Bke7zyUaxzBxzC6GUCo/roMQMrt\nkMCnZW7Adow/Sio6HrQemVc5FuymE8R2tdWEk0iHSHxZatfctepvddHOk8W5\nSmKfzgESca+/u+NQ9uv2NVpr61Wz/CJAxSQCoaYt91XgMw9PwdJZ/IZcf7Qb\nh9PCE2leVOdf9GryXVFcF592v6PdF03N9jNiIYh7mwMv4es79f+7ASSuhITV\nv47p\r\n=xa7L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICBv3+tks4kHWyf3IpqtM629R7OWT1VfSFL+QkeF1HetAiEAo3x77aezjqsRBtBC6k5MW5afJI+VQrHe3XMKzYIgim4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.f7b8755f.0_1611175081999_0.9778675113700663"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.f60de7df.0","@material/top-app-bar":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-uRbiSeu4WZj13XcGPaHKTQPg0NpOWMWJ9g3mZOAEjbC20/HK3Ba8Fmy8ZBNYKSSbySqci/QzvNvVI8vdiG5kfA==","shasum":"66a9d907a08066f94c6db35c90cacb74542c18da","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.f60de7df.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL6YCRA9TVsSAnZWagAApn0QAIiFAL/z86dtWdm1DxoQ\nRxm3SHb5BwtPYPoZzrsluOULAwnS/ypibqsCq705qAnWUw9Tlh53BldQV7Ql\nqAsOPeYOj9bKX4NJxxJgURAjqfteeqfjXcUgdm0htzzvyyWmpDPS5RetMFmJ\nZAwvPV7tpKIEfvr39sSVLTmgmhSiAAc9ELwDUD0xfFXaapvnAFAATR49WqLl\nAhsmGnuKqS4oHcMzqtgksHh8AoVyNykE+N6iQMJh4GBGEXI5sa2AAovsaFKn\nI26wZjXtuVcNu+G2G8690tl3D43uG9i8PQWAyfclbg8sB34UbzMhAX+VYOSP\n7KvB5TEp/NRTTsk9RorD5nzrLXqe3Men08H3E1Hf+lyVXo56f7KIbuAnaAzm\nUiFMa4d2e5bcdwfeqv6lZSrY2QOkdoaKJuyM/gfHnD574FL/euP3B5/NXdqM\nWQCoh45jpLFpFc7vqFZ1GNw0v8Ieus4RHa4QN4aW2IMj7GKqPLjzsmDeePNM\nOiY7VQxLcg5jjG+VNLGhiL70vjPXTcdCsRMhLQBpJLeJ9M5XAtcsQW8hlI2k\nZV7ujhNUvi0AxY+WcQQ8lALStpBqLx1YH/TvV1QNk4oGveIfGbmRHFk1efTK\nTpnOflDK/N1OxoNOec5D8vj3xZ3ZwRYNpKjt3CwkI7uMKQ+aAY/khuTLT9pc\n8rsN\r\n=vvWE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgVHe9kbgHa2cCcggiCvved9Vz0k96Czo2d4xFlI300AIhAKlzfneDriil3gkDxtOw/uMNdCW8KlxA4ClLggnIS/Wc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.f60de7df.0_1611185815860_0.8206700763164383"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.664a2927.0","@material/top-app-bar":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-spcjVyV9nBDpipFduNsizWr6wYgub7WdNBp8bNr/iDk8o1j26o3VQ4URkK4WI36fTL6zjKt8dPnxwYAQUT0UCQ==","shasum":"5ae73d36e07f133722e4fe05a070e4c01a300650","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.664a2927.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdObCRA9TVsSAnZWagAAHDUP/2tdGG/6TjY3VXgs92pX\njuSSZrpBo4oPUY5Mh/zZKXnmNHKDyXsLNYjgJBaMYqRyl5ZoLRJrxMK1sy20\nPm5V+rgYJ314KSHKuzPWrs2UA5XsJIDhTJxsAA0kj77bSl/Ay9kmrnzRoHr2\n3qCbHFLU3OHfGPZcvFcMBzxFgZ4CeGjDJBft8nNn53c+XMVet457Y40tC7gD\noMhzC5vw+s3I9LePkXXv9Y9STCnMbcVyyq3gO/9kULL7oj7poWeb9eUo4bEF\nMUH6OnrdfgdvZjAVRhBnYJHPrWdGGld3ommUFrui4xVJnPwTpuzlNSBdNMuw\nmiib32CaEjW7yiNoGzWvRL2qwnyoS7BgoRY9JwZ85k8Mgxy1SprqkxPy4q2O\n+2QAfeMw8IBRApjsLjY804icGXLYGy0TAlB+04sdJg2+KLEtRljmq7T9cDTz\nviJoJMlwVoC2Uqui7EPxZLwbka9sRogW1HiDOYRqL2a01CXT0AcMoWq25j2O\nYyv0EAbixOuR3TqMU2TOR2/SbW2r+uq7Iot5Zlh1rpeX+hz/Xbg5qG2Ht2Jj\nXWzyViWgzANBSIy+utu3LdMz3xBJIGYDTv5GIzkjEwWx01qmNxoGc/HSZcGu\nclBYi6GEWQw/Z1rURWw+4z8PUPjqdvHoDoXciwz73k76xrQ6ayXjbmvWP6ct\nFGyA\r\n=pIy0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCdNL2OYGK2HYO8BsoItf8xhyhUi21ksihPPeK/pV2MEQIhAIwYjhdAbxlP9ucVc7lYslfLMedeODZBrgMNVNY0kTtN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.664a2927.0_1611256731145_0.41567827896150833"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.a6d312e5.0","@material/top-app-bar":"=10.0.0-canary.fd61b0476.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/P5LXlHyqWf3yu4vx8EgwbSTqvcAJ5/q5LVLfjJIj+9GTHNSoGlQUP5SrFfE4RoZbjgbkU0/Z4No00odt0wayw==","shasum":"e56be1499c76e18428fcbef3aa08754822438e9e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.a6d312e5.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfaJCRA9TVsSAnZWagAANV0P+wao1g/hcOUHdKoinh9p\n335yEc2h480ca1ol3fVln+lkbrbRKHRHGzivtEi+lQ14fAyJAm/K0hBzGXaG\nd70iF1aRWDjWuYdygtliR6xRmKXwZvtQgI3LQv5ZuGPc3dPb0VURIYfq9teb\nuUi/X4+4ilpFLn/wZq16W4lVHd3wUjCLSLgJmhZFA0ERmel+D9ciAR3whOxw\nmMyZ09gJ5UAvEMDlewg2uETP+Cki6/cg+2qHKhKLrx5maEGDKStSb5WIcmmF\nC6P/7z92OEyUjIXtn++miwbJkJoh50PG9JHzmVnEcqPF/9+wHBNDgbk8ulCC\n+sQHSU3M04ViW/5uD/2CmjmKCVIwPubb6qL0r6VL1IJcGSRcECqaoqaRfptB\nkamUpVbjM5O9tRb5MhwZ2eb51oOMtz4gPg47f06483iTqAvmWZ6skdHDKxzB\nFP19bw2ieHZrUNId7nGzJpXNLbbJFyMvZyvHixcgIn3lF6H7ekKvrHAWNtq3\nAnEUnqnd1b3VVSwUFi59bZ6FV/ZvRHNxKtUgu1de4w86tq4dMFGPkEGnpFiX\ng/EQrFvHsSRVq4Ba8Rmg61nzdWZTB7+5i46iJUY0SY0HBJGdbecPY4kMuu8Q\nduARbOP6i3hdmBWYT+kuUa/7FLtOKnihICKj1zy2Aaqt2EvvV1TxxkoyaB8q\nEuzY\r\n=Ltpf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvTCy2Ks9H0kJsvZOHV1HUu3JqpbrneQ+FntKRmx/wTQIhAOiDxb3kGAaXBNA65opqVAm6PG+wFz3142jG2igbujna"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.a6d312e5.0_1611265672739_0.35300563127521056"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.027365eb.0","@material/top-app-bar":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-lTN/oDyPCe2LONM5jL2du1ncJWow2yfT+6zVIAwoVcWyfQe169fevtFIZcneQ90SzxSAS9hh5g7pcGcRtqOCzg==","shasum":"0efd5979c3fe1697a423e88991d2f5de9eab2eaa","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.027365eb.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz6mCRA9TVsSAnZWagAA8jcP/3yjgZZbGJzsyYzjNusf\nAME9ETX1yKFOBEzRA1f5aHaW1IHkQPIN3c/3bE1O0RJWtmn1bfhxEcSsZbC3\nNd1yhkMm6djXwWnCSQOW5EhwVoUxz7RAmg5MzF94urFFS+2LyDEg3xkWcyja\nkQQytOzrv8vxOSTrsFWFadkPk1K0Blp91cyqzyJ85oRdrwNBBxTeMiLU/dxJ\nngNSsOBcTjaecP6Hu+IDOgA2CdbV/F0GvdWG/FpxIarIW9cnyD4vfJU1LuJU\nzjJ6IQ4R0LLfMHruk1yt8IepFZElBtUNmueIRhIWBFSkaClYU4qDBrB9zgxv\ng8x2lMPOHZ/AQBXXtVOCCg1YvHJPO79biQHtPJyS6lNyXOr/8cyAQJiVoWzS\n5cPN+R/dSt1iyUND5B7vIFtBXPGy22wvtoW9m7FBKfTJcyYnDszkRxFYIRMA\nUK/e28Gy+XoL1M7vdl695jqZAu3SGmU0dMlqOk5PAYzRmvR+h2wI9OdnDO2C\nB4Jbr5xZHtgzIia/2xy3S08gHc4zkRzAEUypvkh12ciBgjZR7+qvvXJ98+dM\nc+2RJWE1rWhdRwRt4v4PoekLeDK88U8F8b7joSgZMTDlwxVf9RHF/DMg9Gfo\nzeQd3XvD9R5g8WX6bcOXaChUEiS5iDsRdzH5MWekWYQAcq8uMjUdYkA5jTvm\nonO+\r\n=4irV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHXSxc8iuWlmAhiCw0eUYAZlRBkkJAfWvHIUbPY4m4K4AiBjfZBBWWFqGM8tkElKAcZJbQSVZJrzWEo/OSGP80gtZg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.027365eb.0_1611349669631_0.5721516026921147"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.7e72b66d.0","@material/top-app-bar":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-aHbuWQjrgXZs1RKDRqQ8wtecd2elgANyXzz1zPCjEXEqL4Ft61b58gk8ZG/cYI9hYb/3eSiIZF4LZTEsMYENBA==","shasum":"cbc883e866fcb67ae7817d1b195ea674a28fd8c8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.7e72b66d.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC189CRA9TVsSAnZWagAA+YoP/3Wi43LLi71V0TBY9DRs\ntohqk9aLGVxIHt3dengy4IcaH3lHLkvHlaliVaQPI0r/18uBLhPG03RwpzbK\nXJ2vF8M5bFJJrH0rkcJvot6KSGTX0a7X7mb7oqMXlx6PCUTc1602RogTOwTM\nj2ZJeABJ2St9fudvhxig9vweA55z8Pu4XKga4t2gv5dTGcftIsIeXK9cfNYR\nfp3nc+yKVQRvwH83snJbU8aOWQxgG250CbHGJO2MnzpJzietbju23csp8GpZ\nXvepBJAHLIKDPx6y/XWHxFYZi85KnoNPuH8KrpBIL2ySB589SU0DEOtFjsYL\n9hMk49te9j5SrH1l8i5AxSA7JCiI74R830ZcNWdnMkfsG5rNtFrZ/N9w9mBU\nLOCTINb0SsGDqsefQT3wbMKXg40Ink6QdXDcqwZOyL6XMAth/vDy0PIDN906\niPv+lS6pZSq2jK5p+nvnUmOmJi2y/TO2lnQXDIZDTlsEvR5hKD40ZBFrnXXq\npI1lBPvJgFzIssuJSTabf4nxwPp4K9w8jcpVEe9udHd+OGbTDE6DabW4yCX5\nf9YOITJ5bzHu/ltPQBngz220drmVt7YKZ1u+UV4JproyxUQf/gAYsI4HNprH\nqckwT8egX1AMSbedqKAoVIvzwWm98SzOpuLYMgylYNYNojO8Bf2b2LNhPQLL\nAJRU\r\n=66od\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCy1256uUwWDlG8S8ZQVWkovN5G3/JPFE+wgXXTYpn7TwIgC9UtLAVG+6WylqMKYkb8iUZYVPOGQcTNE5Z4yKK1tlM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.7e72b66d.0_1611358012836_0.7524230868654356"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.a6d6a1e7.0","@material/top-app-bar":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-KT5Yrv4xB6MBNZG6KsLxmHmD0R6IBt+vckcSO0Q2BI7Rz7uz1Yh1Z5VDE2GRuZA2MYBuj4eebNZaUNsV7MEcOA==","shasum":"74731a8f82d2db34c06cdbbd65108d0ebb4e6190","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2CyCRA9TVsSAnZWagAA1ikP/Amljwpz2pS+Sto13yzF\nkGB6HqzoLauwZEyvjaxqXDVVEFKit5EQHRQRphwo1aXeDeEunfUcQDUO074I\nvZw1B4fXa7T8UtvB+fRqTW7nyhI3MDEphdRZc0YbC0GjJ40JOOpWk5jnLkA/\nHfURhh5QqMBfNAXo4wtpmGqzJ/yD7hl7SshmEvgrUCzVVePOPKIrVopasuv4\nAmD8z4Q50r3u8EquWJ5XABjdKtQ7RIxyQdJs3z2LXYFn2gzmlBl9WfV0ZMRa\nJgY+0dXRxC9/mdsllX+OnutehEIVSrs8QU3u+5SsV1fp5GjhYjnx2qO0nOmz\nhw9196evF8zbTSZI+ya41dl1m4hKnUXbAKQPlx0s6U6yIIU5q/bW1QY3+nS8\nr1HkRZd4oMLy48MkRvC1iVGOrIFS29yI4qwDH3voa3kNkkIjmXkeSmAwvBSE\nO6YtT7lboF0Axl7YQNA6UqfCeMs+RKfPOovqhgSpe6t6RR4614Ptt+aCPELT\nvOBuIhndJErBGlPSKJ0BwzicD/DN1eS9vA0cSeSTxTCa/HperxfQxqo/Jbha\nJuMaRN98C1ruMvLhRm+GJmqDylQmq0XorLwtvW3m4tzM919eMrh+TG4Hua/t\nDrpbuztRkZ0vKNx5MfEkwY73/DNN4xz+kzbB6/s6SW6oMBOpzMS5LaTnifyC\n0X6R\r\n=FbNL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFBMl8YvkzVT90USArqqZWG55O+m8TBRUh4sCSWESRdCAiEA5r/0P7B4gtF4m3ANSzSmGpj6TWqRiFTVFnjrZ/IPSPE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.a6d6a1e7.0_1611358385843_0.7096992993801972"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.b95fe100.0","@material/top-app-bar":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MIkaGQliu7ttPMPLpfiGJhqHxlLfoFKmq2fTRyP4SNKI1nQJb4xXk+e5VSd/YYLiXDv3ISNFFjBR6f46MbW/gQ==","shasum":"7dfac04d46f63fc813d6e33814631c15aa5bc67b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.b95fe100.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2UtCRA9TVsSAnZWagAAK88P/0ijpXLOiY5+Yx0/Wg50\nVtdpQNnda0sqnue6DELi9UU89ulIgOaIRNS4KMiFC1bKDrycbDY3M8PrazjO\nXacDEyTPz4RRVURE5/t1TBbxJ59anJ/xKUp4v09Zy7+yuPQ5sWgzRb4lXQuj\nSMkXAqKRu/z7VerctyEe/NNLFVmucl7Nw+c5xMVdtyOq0QqU/tgbvv3XIH95\nPvwlAe4fcmgSl7PH3aEQh648KeL00Om6rUsWAsESbhsFaH+fRs2hUy1ewqvC\n9iFeHweuDE8IEgpJEwoJ90ODJFD31OzWoDwfaWqLXStSLjbr/jrC/EoRlc4W\n6DgE0dsYdDOXEeLM3Rxag7tUr7ZLdbpHOX+0dIKGwuLAREmuDSUcV/ZThxWp\nGMkd02EW+VQtBQW1HQ31nQfdURyn9wuhRTpXQUq+2IExMIaad84aYqas9F8m\nYh00OJvRuInnolerpriilYihNbbk5qXULixzkeYhDZcnoUUjMnDfW08fgFTK\nhMTaKICD8arWSorqxgE4+g+HhYFDgHuCMR3TeXGhQOkRBCrLQe0BOt1ZrMsU\n8ZWXi6/2ZT/8mHqh7zehRcb9wFswQttxjcAheyU9l+J48Kljpcl9QIw6c2K1\n4wFSk/loychWLFklB+3n97u4uZWeiUN3Htk8OFifJFpe/7/cVJbFSVgzHCAE\nk4Cr\r\n=ZO3F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMbllnFMc2N6lASzmfkpOqp5hbiMgu9Ruly9ftVjf7mAiBWuXf1GJXfahbHBRQVKQw9PoPv8r/kyubQcOoX5IGVrQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.b95fe100.0_1611359532937_0.8307557456489867"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.c8797192.0","@material/top-app-bar":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-F9vC8V2kYo394Tu4SNJZ9xDswRO6Y9A8o4UCe33HJImE9MpJ3xb6EpvOiZl+Dx7uo5olzHimmVu/UPa5464GPQ==","shasum":"ab872f057d4f78cb637b8a073a5ea9008b3e7fb8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.c8797192.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2jGCRA9TVsSAnZWagAAZ4sP/RXEjlAfDQ4OLqjGdI+g\nB63S3tMtJA6PaH1mmF8V8m64IW0n8oX7mp7qXBIr2FaIoLHStFfIa+5fu3jl\nDzeXVcllbNxUnQF5MkwJTd7zxTWT5cOsXfUTJlryxcTlSHGSnezxncbY3KF+\nqwF8qP0uRiKbORCQA4aYsyW0eIxR94JOVmVENBXafE2stgGP3OJ+EvWmZ1Tf\nNRjPN2p5yPMeJugrV0gc/f6VHyXJLav2GFKry8yD7M2YHKEEzAdZEdmReW1B\nSVyXBP1+55UCEwqSoY7kMuKmV/GRdCfOQSkeWCVBYlYYehxxhSuePY1ugbJg\nyKaai+rVT7T3gc0z4MXjYa5wkSTOAMQgJC1cqdKCguTcEjClubeDHu1OeFcc\nJt0ltrejn0dkh4LrXod9GTHm07nzHc6HcQc6ktH3u7F9DX/SuUeq8wbcH1t2\nXfj46uDyjYrwmRwtGOTl7L1qkGJfP4yb4FuHC0kZycwlIYMEcen3Wtl0qkMe\nLms5F1GLHKW+utuM+CwXXHUj542NU5KgSNG9fVcp86SuyvdSThJ+QlqNYbIP\nO9uJ7ky/r19kfkpFsZR+UqsJlkK+CVZ2MhbGcA5U9fehwU8QEVFgonAJVCrP\nIvlyklW17md6mGCqYmDRZeI/sWrHS/Qhxh0lLl+XmvyoEdxU943VXQV8GlMf\na+8T\r\n=Liyr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBUYsgXU20gwz8aj3n0PUeczUH2Iplpkbgrw8KxlKFUYAiEAqc9lbXwuQhLnDwT9pvCr5dYs7/Z+vHMmuq6A/gtUV5w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.c8797192.0_1611360453867_0.5364106001580804"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.946f5563.0","@material/top-app-bar":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-MGj3kSfRyQkna7PtwALlEqfbxF6DtOVHus0+3it3ukO042LrjmC1e9kVIHTCNXI9IIs9g6mfpZ8fRQKyfxCRAg==","shasum":"7de12a0956ec85064da3eac7c69ce43833692488","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.946f5563.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3FHCRA9TVsSAnZWagAADf4P/3cIaxWBY9zMvF1P09w6\nXZtHtt/VcrJMBZaaxdrdGHvGWn/JGjDi1JqH00HLap+CdtMTP7xSBiM5n8zH\nmrb8cuJ30SLCmctSBV1LBZvP660kuq47OKecn3WxMO6VEX+7kXfPD5dswBl4\n2pT13Wjt1J50qbrwqcRvIfiu/7tf/Oc7E9ucKhE+VdRqKe6bL4DDFboCwWYo\n6OdAVVQPvH01XlUHRHoKMNem/gKGjKPRO6LCpjc8wFKL0vku214XFDhEO3Tr\nyjWGxjWmjmJ2IO/cSfla2DAhmtm0Mnio+qu6gqA/aOkmd2JSfKVsyW2JZpGC\nILwu/F0cxWHhD8Fy7VUDg/dopnl9ZXNZRBNe3IucrAvONhRcAdOoyThGWd4K\nRHKE/Oyj0ZkEfkTsYQ6GXTjk5f0+fTTy+cC+s9Osl35qZlzeQGqn83dMiWir\nT1gQr5Hifz3zPSwSFQd3HQVMdvgiiijyKD1WYo+GdAML9GuW5TUYghOXA0mH\nzEtTAvOheG45nq6rdE3EYFAq6+jCWuvs+UPuaHe7XBJ86nCHKMeKj97QxbTW\nBTgE1hks1+RSC0XAXHiAIEDfkPoKElnZ9Py5kl7ZPDqasc1QTCChF5NUGBC8\nc2S2LgfgsHjgvrE29rLxNbkpTUq/iyzZomIbHrAZj50vG3DfNUY90dVTOb5g\nPMFD\r\n=TTQ1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDco0MzHaAytolpM1Pbb017OdmES++LHet1LrkvlD8RJwIhAPdRfwzndJTsXxJncrovCxk0mmlNUQL2j8OpE9tpHMEr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.946f5563.0_1611362631080_0.25648614737934516"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.43664f0e.0","@material/top-app-bar":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-hDVXPlwn4F7erPpUHfzXqt1IZf4/+9oQnl9iMNtv1mu9b2XMaT6EpoyZSC7ft126G2lWsk8e7kNdZHEwCtvf5Q==","shasum":"09c4da5d77e00c45a7bb9411f23ae6e3b7efa164","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.43664f0e.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0jbCRA9TVsSAnZWagAAz3oP/23GT5QqmFQyz45TxA0N\n4ZgRw379mu4MFtg+A1k1oVzpnYpYGkjCrlv8pfxsNjsu3/NWyjG31sKiNuR+\nj5QqP0YBzfv81Qoyz3HcL7mLK9+voMzcNmNK9ul7aXoR1DjbhGSu4m1yE4fT\nStQb6xdbObG1mNHgeAoID+uEzUC0DVKqIF9+7Mm2RW0dh9Du5aSqBeZ4QBu/\n2D9ylzBHdXGDRJAJo9Q77v/jf8moBwCWGpDaNER+nlIlOzhwH+as0JNMFQRm\niteopeLBBGbJ0atbzrT922QQ/osXAkfCh44vJotK1bMUVNRdz/utztdEKGF+\nlBhOEFSJ1ak6+BrmVsCY8Oy3JYWW5tO9pgxnQeJObu0t+4jYD0dgre4Kyzkp\nOcxmWTonLTod7s71Zbbgf3vaulz++Q2+LagPBi0tElgSzXz0lam/U8qPOKcc\nkChE96BcUBFq7sYod5ReMFoEOkwHF6tMq9WbSAeEgRWshphb5d1MCLtTshKQ\nr+02cHDmKfkH9dF5QKrCwAshsmQomo4jksuYsJjsVB+wpA628wQ3IWs8v7jt\n1o5sy791ywuq3afeDy2P+zMWodYJVOwwhZhH3R72bX2qaT6IAaWeXMEN31Yn\nHS0h+z25S352eJrsB8ADDTRfIOxLS4u97UQ0iPnmaPeDzqc4SWq0QNL9s6Vn\nLFVt\r\n=b3Uv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCbnoZ/oFdEfi/BqAaXbWwAURa9mFhlwK+GpUvAG02qigIgWV+EHCqHQuyqiUKIA3+GxDyi45YCuRn9qzN+rdBSpP0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.43664f0e.0_1611614427178_0.6552478806903723"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.2e769e3c.0","@material/top-app-bar":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-C0XXvYe6ofeki25E4E6XvgaJPQyR7YhSDQSVDgxQCGGw2j2fZfI9+LQ/XFnAAm9ivksx3lfnwCQo5JKQ5crJIA==","shasum":"2d3d86288af94b5ce07d31dc731cbd25a1e28df7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.2e769e3c.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD10MCRA9TVsSAnZWagAATpEP/01IbakEZcSs4HjEpUtP\nTqYQnRk0HmgQunhlOJ5kPI8otI5g8d1eQ5OTx4M2zhWG6ETmhDzT0IkNKbJE\n9T8aB+h45XpbwgpT5seOGCyZiD042EQjXei7L3jtHXe+S7Lna0IGNaXKmaT2\njDgVWlCDSVbih7xuzevtkMRFwV7+eFbE4igkTgM6Wp76z0M7oKpsgmefD9Ks\nJqW61C2Cq5AbEA1tdSFJmZvI8jubVAAQOeKyAYm+94pSZD2sZgwpRzauQJfj\nvaY7gTyXuRx+iZv/cjtFE2TWB7JdN9uS+hDeVAhIaHnPnIi9g3vXncU6Iepc\nDKAeG5CfV2/23BvobHDyBeUAJSbdIyzrh2vqnMK7ZqCRnWAjHtAevFobV94T\nUxR2PBqoFPBVl901jIhRo1K7JRiN2D927D5Q56dQEPfswFnMi2XrhQqxjUrR\n3FirVlZjv6jOaofOklm9f9PhJEm2G2tmdrs6O5dzqGxPzb1okOCKYyJo6TU8\ntx+RuVdOdelNTM+FKlUUYD1sALk3Xy2sNxIQycYJwUWquWnpXbxBo0V2dZQl\nZti9Gguyiy4dNpTNYsz1Nx9CRX3A3+X5N0eVtJIxYCbhPUCrz7kNDgtIi0vG\n8o3EWlzFuCJR/FZOkXuVjjz+k8oo1HjH75UamzkMaoGBk50Hq3/94Lhj/qBS\n7Z1T\r\n=thul\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMWi8ymQfCYk/QEXBR0CbK2BkqiRCJgBfWaQHEjdCWUQIhALl/EWKwTr0Q6PIWVZgKSaB+WqkoEm7oQi+LjWpd1KCP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.2e769e3c.0_1611619596377_0.9562472209137585"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.14e01610.0","@material/top-app-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-nSf+xQG+yVH5WqjbLPaUp01Xji1gCDq+j1agVYIPN8sH0Gwop7cHTO/1/EvFmZVTXJfW260p0TcNypMGdmxqdw==","shasum":"0a740ed54da4c2a4aa23eba63a8bc7cda0aa3a31","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.14e01610.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcRUCRA9TVsSAnZWagAAJ8AP/RllaTErKZNgJmjdkl18\nJVf55unS226DqHH86r4ZuMbNMioxBoH+KdQS8JH+8p9Qn/OS0+VKIiqepBuT\nl5wF3PxfRmGxCNN0+V64hgukiRFqQkqW59IJNbZD2NUK6oY6IHEhE0qcGZQE\n9TZSmIgeq+q7iWV7Hr5ZJKED/W4oNyik60dKjZQoEpJEhOKp5VGQxguH9L0+\nlASwA0DQzUiRtbziEytjLPytGHfaS9sqpdpwDcXkpFNShv63t99c+dSIE9gT\na2/vRuloqiGj1K+j3J34jLyTP4OM8tpoER24WlU8bHZqw023etg8OUMDgh7U\n5b/XtDQxQbqWOZ50BdMO6+thsyHxQGH76abPHlZRwwBVTvDSOIwBaXGVNYEJ\nEt46kTykbamO334vUP3u7wXD0Fl0L1HVzxRpmBMxujA2BvpbCAeu616EFSvx\nhRiE8Z/lpR9oCbUAIZCcF1RplXGVuCODWdj3QSJhOv9zjGenkohdaPjee6uh\n8dsOm/s0rNK2c9OG9lcS/1xcjZT51sRX/gaJBH0w6ZXpk55eSivmPBPqpK/M\nyJDBXdYpSPNDHvobuYvWUsxwAJb2q6H9gOpBuQWNUUQl4x8P/PLn/Z8Btef+\nOcloBr1YKsoqiqKv1dO26ChJ/d8OPhi1/VUgUartrZfPBJ7Tw9WNIbsDJRA0\nvIar\r\n=aZZ/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCw9agHN12CX3FE+efNcmJvCQ73+SzR4brNBzP+JM/1uAIhAPab8Z0TxM4ZN7xCMHkTSU8sHl3RFdhuwJUFwDxvJz7E"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.14e01610.0_1611777107240_0.7811933360200907"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.5de00c1b.0","@material/top-app-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-gGdOMeh28h7agnUy4j9GN4p68+8aWI3f+KtydhWfmcZkfMFPGTbwyYDY6Un7c9OuUNvL117vJXe98y2ghBaFIQ==","shasum":"a4c4440918e7227a69b063089242c7145cc83470","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.5de00c1b.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcpYCRA9TVsSAnZWagAAmoIQAJ/lf/INC5plzy3vtqUR\nGAAaIhl1Jhd9mwxIRnKaMSISGyWRYVy7SKednnGQiC0lLf2U9XcuWvImHlgv\n78vWhTgrF6p/8inQgnThOM3t1thEI+omK2NOQ3Atzl7zhbfM+0lAYyd+ZVcI\nHdd8srHnuYbfAg5nYblCdwOz6UlcGyfgkwlBM3QYkfcKhKr8PdSrzqm1Lg07\npZtFjnxFfy88GXuc0YI9UD5mZhVYBBtyIFFz2OOUf/qFySo21qBqUTvzGlvE\njReN4SsJ34onRq4oXdjWqApLqVAH5W2hLBK1x802HB775fuCYffrPZrO8e1x\nQT3bvWwvfdgatxSRgpVe4jSNyak4AlaaYeOCkUX/7wB9Aezj5EPwOGHYu2mD\n1RyJXRpZtTEAm0dllniILMibeGV5TAS27mA+oP8231ByVZ6WNsGk/xaeXTJr\niShYKJgQy71UfMAvtNl/YI+qButg83Wb8+UeAca0pRmtPURmHaRY1VWC9JWT\nW4h/6CQ+QtmooxlAbOzDKdlEYbK9O675iJ4UwmAw8ZVTaLkHKwnSb0fnSI+E\nV2rmVNWf7OsP5rLIhVJmg84Sci/nRsFH/Gdxd5Ozem7+bc6n89+mVVM2J/RJ\n23W6U2VebHShAro5AnaYubULwFkq8zgD5hu/GaxDJwpwDIJt53d1qzrNGkme\n44PF\r\n=C2PC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIANBeomzyUug85r3SIoW7LJGdbofk/Sow7Qsyi22Fe7fAiBJANwFLxGGve7orFg08HTP3LkPqfFRWZL56ZIw1vwpmA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.5de00c1b.0_1611778648360_0.6534806926528627"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.5a328336.0","@material/top-app-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-yERhLUIBd69hhOJNBh5Hy+5fc8/OBdJKIeuV9v8E30ITw/sOt+Esm/Y+Ap+tC/zA0yxUMpDOC2jpNGQtN2Fyfw==","shasum":"0d08de2ab47ebedc0781b06fd1f1ad54f63f4e7b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.5a328336.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExaWCRA9TVsSAnZWagAAqPcP/1jsE3V/Oa7xOCsKsEkQ\np+k3v9UurWn+7/Q2zxfX/SqtbkuopxccfpMBqQG2+BnIX1DTP0hqYPDj71VX\nxXwMbC4G3YDF2jNEv+qmpfSUHh+cegm++68LYXxEtluIPEvbTCu5mhTwDpPc\nndElvyfhOVTf1VwBynS6YB9cyCd3bwi1+8el2z5gI7NuED590gGUP39tFHrC\n6JLRKt3cKzhGP16zxobJjVrQBPyEM9H8R3KqRjaLGMkcce0j19F6De4SpBX/\noKYUcM/dguVnbi7gmn2ouD0qi2DWLL6WdjRWIVyRbkoPkxmXxF0Mb7LM+qrL\nvaMPVUjpv6b1e2uV1EsL4oKq092x/ov5b0FwC4xxGSucHnxgkezGNKUTeKlv\npEojglfpkfFbayI9LIaONjfxcTzi9BBJQDjHDNNIORI6oSycWPyZdT7mtz+B\nTZAggglw9KmIqYK/IDlZ/Bw8XA/zt2cW1jq3RDrX8ToPqLUmvrrku4E/WjWG\nec1gdOgXrFtz7wSwKqR7JALuzWtMOnC3SFn4biA1XkN8a4oRkPKI1DXDPKUC\nSbQ9cu0nG41OMlYFS3C8JQhyKk8gny6mQmXxTM41gL4mWxpPxXTfecd3pnPX\nPdCAMf8myenrA5CbYdlSj4G6t7HgJOUmCFSEpw7bnCHf1Tue7kMIzRL+OeLS\nIZAX\r\n=TTTE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcj78+I/fzCw7SGuvGfGzaIg8vd0oZKRcF9eMSzW2hnwIgVvj1I1lnZ0Pk+nkT6aAlc+vyQojzAcOQWKkDlc4Jygo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.5a328336.0_1611863702059_0.7469530487171558"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.533b1251.0","@material/top-app-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-/CAdahTYKORNpwtPq5CwD+3nzxGqtTvceU8BhiWq3WzbxxNthrbXO5ZBwF+u/uMCnGdsFGXY1mO8Bd7thVMITA==","shasum":"8e7c94eb1cc451b8c3c13074a573ab5c4aee96e7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.533b1251.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCXECRA9TVsSAnZWagAAFvEP/ih8GI978AC04s0CkNcR\nVjh8dKUYxA/g/HEZipQEFDXQOIZFGSQw73yEySGXePVn0fNdpfJCZR8KeGcx\nKFA+GaVYSYtx93jQOm5Ol5l9z8TwXU3XjV0r+XrXYozKsAMB74zA9eEEcEjT\nLYypQzsZ5mRNAAhxJgY1NRf2gZOWqz7USBLSLR+Pv7R2IOgP9iEUkyq6ztmN\nsF2yiKMwoEj7xCVAWBK6Z+hOirjD/Gayh5RrekPDyvOcptKystCC8AgFqpPL\nQgI7ms2xxKrT9J3jeIBXuk5Wb6FEvR3Uii8o4XAsKdyELPzPCGhu6Fvtgcd6\nAA7hit8ENqq2twKxhoZQF7yl3eyewL64qQZGUWTt0kNOg8z52VxX0sYdzkRS\nXnCGI7UYATjQGCc6a/aGXwxaIwVllCqt6rowrtst2v3K/2ZIYAKbZ11Ky5jw\noVkA4msaUfO4+yxtezViG62DEDpScbijIqCnW50/yP2eVi/JJomlWKLEFKb8\nFTNaWDZJyNmikQPxZod5vvRisOuzYkR6LMhj7RgMwOgXR2PMeeomnQyO0Vgn\nJKJWISHdQdnUPI0LwcmNPDAwRrOhGPL2n6uQZzXpWROYU/9IzVaNf5R2AFcv\ngXrlOF6b6WPyqW3RVvE8Kd5/WfRnKywK3H0/mwdHdfJYxRFFz/VaeCtqFvzd\nOVlA\r\n=N1ua\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCedKGpuykGiRD1N1PLoWPqD/pzPORJ5QYlhpEy/j4TmwIhAO6v4rX8cIGxTVGWU2dpgOclBHnAVGAqu+503LD12Yfb"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.533b1251.0_1611933123733_0.12702931356002867"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.ab5c0a10.0","@material/top-app-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-xz8QOFv+mMH2w9VrvE509n/5GO/UTGORNYQJUjwNfUv4MCzdPcm8xc2eE8ijXSf2e5MEh+7ZujzOL3fXUjNR+w==","shasum":"88a5a05b685a3a26d2533ad5b9f22287931b7ea5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.ab5c0a10.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbNqCRA9TVsSAnZWagAAtGsQAJ4KKfdVfp38riPTBfLD\nIhieKtLHtWUx6vLm5tPYI8NC6NH6Ivs7C0DUJHnkd8dQWQSyl0GUwXfL9TnO\n8UJ4Fg8k8WJ9moEozS3jpaUPvIs2c31BZqkTKCMJO37u+Yen3qW+VPaCZo2E\nOBbnLHGKdl4extunjtTxy1cbgro9xeuDM48M9UNTGFWOllKLBoaO9Pgr2Okb\n4InQkzghTsGqnpWphyVxiLMli4520pVN8Gr4Q1o2iHqKQtao45mTAr9voMCo\nj1qmtrUaWScWyBujuX3876xFtO9n0dEWTz9FpQQ3OTSphBd7YIf4KyCRBmIw\nJhqGplC0tButJyYLzuilW5Ka4cuUH+wgWNNEgNsZHb1Nln/7HvGdhp8G3DRd\nw05YEO2ZZdT0RTlYnNV9TisIxTIy9Lirwwxj989ILB9Ny+CdwofHxvxdR1xW\nhWD16mVDl8NpIGMQ4gcfZMCRwhPv06f+Ci5Lp/p1x9hy1Qh9Z2qX2GtC5Oud\ni4o87fRqXT3DkA+H7gVqu/JuwImpzDTPuWQ4cpkLIkzNqOPxqbBoz5CpFrQJ\nlIg3bWtoM+DxH0zOFenDU5F4wuc9kiP9obMCk1unHqXG9WYRIp3mn6n7Kby9\nMBhS2Uv4xbFuJMEHjcJeID9Ytyu90crnpUnYVPBMUwFVtCKNkGf2ctEavL+6\nHQbk\r\n=8DqH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPJDUjt3PjEgd1ndN/f55nH+H13vJE0E7aL5QidhQwrQIgR5Js4QtlK1TuwLY8rrHBqTAQizJJXWCkzcKIsv0qKGs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.ab5c0a10.0_1612297065497_0.581575301351636"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.b7a40b27.0","@material/top-app-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-HZ4xA4pmYhaLdan3PRTWjJ54Lhom+YdIrs8LyyPhpqyeex/gjgni6GTeZFyklkCRDxA7q/6Ev9Mq7C1Flgguag==","shasum":"20003df39135508fbe6c75d13d884831e0e42893","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.b7a40b27.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrtpCRA9TVsSAnZWagAAFzIP/0AjRpR7wrApJxxE/aka\nMv5SO767TFiOUZxDLVI1c52G4g218+9It/nIyiFLhnjhhd7GpwBUVY4AWZmc\nnRUqGOCcR5v5nCJGZj3HTYi/o7D6WHVau97Yy1muqRqyegYZvBOyVjS0Hhfu\nnwaMru8PXS6m5popPcdmx/oUjOWpDxl/M0o9D4RQ+FCGlURC7m4KmwAs5uFn\nccUXX1iUqf9rurxdEiQ4hMMa/M7KneKR46iyM+vqoCxkave1AR8qvodkgCYP\n/k20CgLwdtuxT8/fa8BlatylOqQy64WoGUFyeunNa2EcQaoH4kelRrEwutQG\nmER1zPfNv2QUsEWcPbSeGRkqu3n2I1zyqjtD1BDweUbHNJKUsIXvqhgTlGYC\nAWKn4gsyjplXsfRiujnIUU0MgM4lcU0pIMnY5KSwPIC8mzbXJhtip5QsyeeG\nl+pMJyf6kAHwl0dvc9+VwuvalSdTivtMxQHC6kNVa/vPxVdRcl2kX41ibT3J\nUvaQHVBPkF7TxKreKNiy91p8flB3VH85nnZdo5CVZ7J4om96CN49Z+kyQ0So\nQoeSaQLP7t91fE2+Nq4hJlK5GNIhNhORsNe4Hy2qN7dwrOMo2r0jcxQocLGD\nICuRZjZ7of5BAfUrbIMoPryoZwvHWQn5qnUxWF+tDZZmh4/LuPPIHoxQ4Le4\nEjMv\r\n=12cP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDm+SKMc1UpKSfb4vR2Xji57wzSA86BtXSrQZDHL/X15AiEAmTI8oV2+LwT9C/8njm7699oEm8HOn1MJ5m0LCsFaFrM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.b7a40b27.0_1612364649127_0.25569879883345603"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.0fdee204.0","@material/top-app-bar":"=10.0.0-canary.8e66dbfee.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-xPcxO55hfAimuUWhj7W/1ktxS0TqnJ4jMkFf2+crxT95Swka2B4GPw3f67U1rJNeP7+v2Bu801Y6v9ERAPAbnw==","shasum":"efd90ac8728d8981e7ea14ad01f57ea955bd09f1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.0fdee204.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuyvCRA9TVsSAnZWagAAbhgQAKE/NURU79H0M94FYUUz\n6nIBC/ThhCdeplddPnvaWmGJSG9klOAX5h/jdCqStgOZXvg7qMe8GlnPrbRp\nEq9o0/7AwNqfgmse2q9I+sZAeK3aHZIhPhIla+wadhjQexwXqTU1DsOBsEwS\nUey1ZGXT/So0KsEPxpvFTlENyeM7JGqNi6S7xKlZjUR7GTbpXcSDRk8kKqyU\n/endtxkaVU31AD4B0NkKiKYWmpJo18Mj/cABOrAvCziFA7NNQW/FtWH0F2t1\nUjAk6kBghFWU3Gngnf9/fSiWJ5h4aTKb439yrORa5Zsm0GlCNlUWG1Y98YAS\nupWo55Cdu0T9jA3vghzqcXhVFqYatdhXLOw9G6wLcK6Lqi3s7+swKFuEGGd0\n/PUsAqsZbIro0ESVYHNTFg+T6Zx5gJDXE06ObkXERwNhQZrapqX8ConB4YAj\nzB9v0MYsmsNnOyVRTF4apXH01QfUjseqWpJLMwYa19f/DCgsRbx/XohUZ2Wf\neRLduP65oXPeNhYMRNJZxTFb7tSjZW3ORpaO27Eri+N/59XskgLEQC+UZ3ZR\njQi+XY7jAxUkqODedPQfIzCjv3NwjUZVF+SJ0bd4Sf3kTyzoqfCvP7DFXqrW\nzp9qrhaRDAP+PmJmWOpREHkWWuy0My+h5O9AzHJ6mR9Zu7w5nITjjOporOgk\nLyKA\r\n=Y0jc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDCH2804YvyhPumcdPnW9g7OLH+gRmI4fbbDXW4hWUiaAIga9rqG72aYnSPTCWWXSzLbCraQrpfgAEOtIm8P4JO2n0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.0fdee204.0_1612377263527_0.02014726167630565"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.5160e548.0","@material/top-app-bar":"=11.0.0-canary.b5227247d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-cgkrO1xZnBPZR1olEed3rCFbh6KEmgGgycIFtFBYaJmO29bCo9UnAkw8I2m00nYu3KL2ziul+ekAufd3otBzCQ==","shasum":"bd90cdb4ad8263e15612f84c082411fea5fb927e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.5160e548.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdoICRA9TVsSAnZWagAAWKcQAJbOBoB6ga5kvRvlWmbe\nbWfmvBzrScK05ICJ9AD44bYHHMPcPrdufZPIqxRNtxWatYm8zZKnrgXePGNA\neXAEI/4F+nilosjWwJ4eFVLwly3F1CVQeGTLWgsoTIHQa0J2vAPX7izwL22b\nv9YSB9ZYGSi/6lVIUtNdsOOzx/lv2MVW7QkM8uAGPAZ/Q8fU8RV88sfBTvia\n8T1qG1m0/g5hU50/W1imADKh7pSfvBuIgYq7FUrye91ze96Np/Ib8b9uR0Te\n3X4sh5lfc/00jaYdjYxRVuxD0kaqTh0/76wIv7ucf6PTY4kaXu1wnZpzCUwn\nOASNQFOSkVo/PpH4jPV1oGuPLE7aiC+OqvK/FgNDBHg3fzM5qELwVhr5FtOG\nIiPQza9u9EzlFf1xJPj3tLfzihLzbh6ViPfO9beZ4ewNDIvfmHxk122DtLf8\nQyLCE4shEfwFkVViO6kSg/KsvofZmMcvN1iuX2gXYEv+u6gBKoQiaZjqUiv9\nwLWKQn7bYP9UNdzBkhnuSotyPHx0mASlyWz0arc58hMTN5kfpKymLeY5u52t\n2qUBbjEEduJO6Ueu1ROIXzVVJLy39smZk2sUAWp2BmVhVJ8ROHql3SnsNj71\nXZc10FHhXlNeynJYDawa/UT6atVJnPJnIIWckns5RjgqXIxP8yqpPvVvGVND\nwAoz\r\n=47s8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDT99cJv7k5YtIbKDeTl8d0J2KiKo3zJphDosAYBvcjUgIgbFSZ4v21u1OGUkcRTVCgCaf+2D8XqfqKiKlPuUZpnRQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.5160e548.0_1612569095652_0.9750515003523859"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.4fa2daec.0","@material/top-app-bar":"=11.0.0-canary.aac8f5d9a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-77QsdpVudhymL6dZPPTp9K6KSwMTpn5TirgM7QWvB7yDQmBYC/Aov6PjN+kbgNYB8KvIEeVzKe8rPxC+9WNMFw==","shasum":"028ea629f73f1adc3b6c585965a86ec05bba90bf","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.4fa2daec.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdT8CRA9TVsSAnZWagAArRgQAKUNQ1rpVeN7g9hp8T1i\nQuxat9JlFK6ZbOr33R/LPn3QeFbSNZFH/25oEcLyytDy0Zr3szY2iwx+yqGx\nPWB50r5sKmTLlyFVWR+jAqBj+XsMDvmqgZmHcMsH6M3ePaY14fKExssLmoaf\nqFj+2++osK0s01GStKpGTgegqfmU7YxvAKD5Fk3ZkQ73C83+Dm+FIoPeUAHr\n9+hAzAYKZkJ6NKx90WU2G7qHBGJcvM8CRgXzGtx5HRDXNwus4LouCEekmfn3\n3Q1hSKoaI/7oYqw5G63Yuo8Qb9Lr1UTNKoo5vMaQFt8c3QymN6zn+XQbOgbw\nXRRwamSXrionkUxOHaMIb/xcDf5UVRmhkP7HOWdRec6oooadaA7ewzehSKsC\nTtIoxR/oTyWN8eAkYmysvoqY8kbQ7G9rz02tNg5unzw8yjTubU9TQwRvumTp\nRb2tcqn1q20D8KpHKQW/zC2yrJCL9yicA3XDNeXCkEqw5oA+RHFt1dAMDD+Y\nyPxgaYIv87SOP6jmsnaooQ0AUu72tYErbTK8csSFrwSJQ+la1CE2i+qwrhT/\nPTpyQfiv3XJYfx2gYXDoxO9flVofjNTeJcQG2Dq5qjPHzwROcnV7tGVUobiP\nYhuMLFBYK1+fcR3w4uweK7jsoSFccEK02cpeR7tit2VrfLn680bTvitgIwN6\nw8BM\r\n=TIFl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC75wu9dKmBtWGoKLaHFEhEKv2mYEc2IX0SAMOP2d9CuQIhAIqh0+0+bzMXjJ6bduIjEL5qd2iTu6B2sQ0PZCwpN0KH"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.4fa2daec.0_1612829947686_0.6037760114851054"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.67f285fb.0","@material/top-app-bar":"=11.0.0-canary.750e18fc7.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-pevYf2dnf51XY8IdGYn+77nrmf6Jzr8NAJ3wsrP5ZfvloXiiDg4AS0fTGLF6KPBNfar3c4PvUmpfUM8uwkABbQ==","shasum":"b03ac7322748b1bf6e617076a5e77125ee82949f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.67f285fb.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdyNCRA9TVsSAnZWagAAUbEP/1G1M8VMiT84QwcppScq\nb64oCiXSLOvKiePaie7cteXwjAdFi5I7JuAS4Wxg0KbBj6Zr7IbiNFZrZQ28\nWKy5AF/+UOiuTc4jx9qknXOuRrL0UmAR7KiPc5RxfKHjRtIPl5g86O6UOCWB\ngUjobBlDOXY+mXAwGq0A6bpUguYVa0HuKHwOCpMwd5pyopM1ytWz4k4R0nh6\nggT17oyO8M3bb8a4WVS0wLVXRZabw+GuOrFO802eefWoMFuQrkoTMMdmDqVf\nPvF+Nxlevg1+zCzcQzFjN9NtApJBfaxdG91+x07/E6P4SaiT7eEtQBxaljmV\nMcOz13bRyCc+1THbjZ33HXqsQzcPSIHfFcUYoDZWyvExumVRZJwzS9Net9eJ\nzt9a8EgcU2MUX7oZ3ImYxDXNawId1mn152STCXJvJ5qcipa0bYYaMiIxUWPB\n9oJelU1ue9rqmUG/Ptzdv5BoSYTizKFTKNXCzSg65LQXDPxgEShlXZynty41\npoilflOK+nHoL8klcNU4a0ET7PgdhzWnXGrkhKDIq1G/JsbpHGaglW95vpmk\nQyu3K9Ui/ia4Z5aylR0WlNAgL1Ai7jgSsqwmZKX6mkW51QBEsQIndWOJkTeJ\npgOEve6zoe1x3nNezMZOt185fVvI4Dxr02nPxkptd6/WA/qskevaQBvOmXqU\np1d/\r\n=9jG9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAck1qrL6sP5qYkBmc3bMZSpr8UNpnteeI+FNraPdVMgAiEAp+pERiER0talfeSaL0BvzO5uTOA8n34bTGHfQBsqNPk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.67f285fb.0_1612831885009_0.4101652828706266"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.58cd5a70.0","@material/top-app-bar":"=11.0.0-canary.b62b1266d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-fOLp4YxFFev/1NfEKqN5/wDd/p7iqHnVwdXfnnZsn0P7nUaS3JsAAsMASH7PAXpsPhNv5wrYE/ogWKQsSR5Tzw==","shasum":"e426a4a9e0aca2ae9cf993ff384f1a824b6d33ef","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.58cd5a70.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZdoCRA9TVsSAnZWagAA1EMP/3zUlFNfCZSGXuURUUQx\n+CiQ99b26XbZZ41fx0rFSr8ADoiosCW5r4pOl/X20VMJkkVoAEks3DsdLXGf\n6B/8P1dgqnguCgFHh081Rvv+a6LPOv60lsh0N6Ne1STL56FvTGMVNub5AHuf\n/4KGOJ5qGAzi0YeW2Frdjfb5O/wKaosfOQ8AgJBAbc89EYb1ykCt5bpsXd62\nBNggAAo7/bue9jkVTTWPYfkB3I4+U347qu3DztMMPiXFm3LmlmOre6M8wjSz\nYP55ztQ6JOFNfjrHRsO/5CAy9pQpWN8wCjkNkWmX3yLX+UG+nXnZqzOf8F2p\nijH7NIKL/C9W1lV0D8HNTuZM6ekR/Hg1iqYl3HsG5WBGbo5be07oeXj6+X0C\nT/Pe8PcsY5OuMjR5hkZ3DZumGvgRUM6Nrxem4vEZQT6g7kZCp20v8C3S0+cC\nBevJqYrf6gPnym0LvUomD/7Yr+R0oK2j/7fXCmi8TL7D6c/tL5QoZC1jA/N5\nFkg6K84URfg/Pf0X6PUn1S9j5TC5Vt5Ip33HJGXThyjvONjUd8QCErr6TDYn\nr/ytv9spnHXfSrcmFf2GX08TnOthHdxy1gGtaMVAN+bwUyPBxaLN/MBmYclB\nbhNnZkXQaOxXCrFOPIRfb8ylK+YanocO57cGTQ7R7lso3iqRTX61gWfs82bh\nmHF8\r\n=QrY1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGKVnoJ1s/sQaGQhC0MiYepuSwu1xreoIealB2wEymegIhAPaieUIl2Ko/vKkIgfZVyG/uRt4hqnzUkTJ25BFUYwYO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.58cd5a70.0_1613076327791_0.1774144281054555"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.8107ca43.0","@material/top-app-bar":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-SJ4LOBncIcIJYr6oJ+lxRzyk/INFGkcLjGcOP7NoPksDHbrJgj1RK9y3/4LdoBU9gPYVUZmQwNoEFd1k1lyD7w==","shasum":"f26e2651f0ff4d68670c95d8f399bc6d43f50e81","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.8107ca43.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb3PCRA9TVsSAnZWagAA5PUP/3IYd1OFatCT87xYGQr8\nxOSOW6uF5gUYnws9/sDLOzWSV7zTRr0n/t3KZNO8wZPVndQ86BUKZgJl18Ry\nF1KySgp+Ux38L9jrncA1YqYFmYT5yttLJ7IReu6W2bZr6eBktSBnwYeajpdd\n6NRhJgP1eqXNzOKyCcxZptu0IF8iaKjT2L8Sd8heCA50n/3g9QyUZKYRErVo\nkmvfRl9WGMJMZMrrSi1mcY5/oIrRPNwlmc6YJk8hNENst1QJawWwVwHllgnu\nBl1g8A0m7DT04QY8gB/CpfixIpdY/csiz/D3sXtpVe1BvChkkod/m0orDX5y\nYwVUfCmK8sfu9vfPGj5Oj40AhmT9UW6g9INOw2ErIOAR2UgOxxAOCs1/ukcE\nWLhWIMUuepU3wc7WzWy2XlRxqQTYbKC022Y1cmQUa/x5000+P9BUGFarp1Ps\n6KCwpUc12bATGMHaNPGKSaye3CLTh7+oB4d6FJ3Dv+rMjJ2wU1zPaydXjSb3\nSvM1QTkJEjzyCKhNpCnZEyb6NFdrY2RIbZgZp16ESOMLz8u9Iu8btJQ6nmzJ\nJgC2GLr54Ovw3dnWH3R1eEkXOqDcz8gPpd+JUsz92zoZCfQX3CXvIdIcpOO4\nLBs3tbV+eS8tBDeRkbKQhT85XPDLicetmidLlSX7D8KCkW8A5SA+Go44YSO/\nvV3D\r\n=EgCH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3UyAR9Z3qsCXGaArod/ZObDOhGGudqzK1bkck8rAVxQIgLhO1KrChERRnnRK2NH6A2Vt0D5joZOKmC+vW1+nGO+M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.8107ca43.0_1613086159568_0.8405509602145338"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.d35d64ef.0","@material/top-app-bar":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-/8rgOHnANXkD4gb46XwTZQn3UgyES0NduIsdTjchRGrrvqgA3/0hoFq6DhZZytTFzy3/Wi1PaUg8DFY7SDQL6A==","shasum":"c3e1158c2fbc68838399157a4fb4c1dc95e431e1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.d35d64ef.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcEgCRA9TVsSAnZWagAA5QoP/j/hIYmo4s0LyzJ/lUv2\nPDaGPr1+drgHU1+jE3NYx4RhtA+JyQA5alGpl7ZvNvg+c6WExUF/Wr/YJbVM\neRwi4oHw1euGyC15l5k+6noMETaEXleqdzs9QM8k8i8Jyb9MSfvsx3m6AveL\nbcxSUiQjGkiKclxQxpDQ4qrG4DXinIAb6qZ1J7TbJj9H+WP12RCxbXhn68mb\nz1R50JCP3IL/krzLiAnNuSU5HTDPV67W1L1LkYBzA0/4dpQQE68809foqUEB\nnpSLZXiUPox+xeBETjcOgkHMpA9qXlPyht5QIYw3HBtYx5FmYnvxti0sHn9+\nMFkuUPEyrkeQwGz9E3RVxOF9Ngg5mbPAHWncQuR31QEQxE1FGsDGpWFD7+mZ\ndR1XnfzR9PWna/clRM3JODeM4FZ7C+pnJFuRfvzZyDuWnr3FwMMi06ZPmqn8\nOqTiWTrnU+D3wy/D0v0jiYROEOIMruF4SjnG3dB+wj9cNPv/ISvr7nj5BDhc\nN8zm+81f2Q0Iph7NpFXxN5bMVtOr3kBlEYs3cIqzI96rPr0/XUu47RDaZ6fK\nFvxlxZRUwPsulzZWT6p1xrROfz5ahS+JsgvbcFEWX7xjw+uPeZZX6q2/cKpT\nTUI8UsI1CHPbeNHj4Q/767H0qrff58KhWHz2QwPP9q6PMh9cqvkKjz/JtMQW\nhJIw\r\n=/hyT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAQ2Ckr80JibOovsckt1OXqtaGtGXADlu3ZufhrLDGFzAiAFlB8dGlgNnziiWio8O/e9Bv4JUrSA4EnOnQvFLrgwRQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.d35d64ef.0_1613087008591_0.10064959622708591"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.78bcf058.0","@material/top-app-bar":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-J/xsFMcUiE/epvnF+591gBftomopNlMzJitvrfLKXO3t+mvUJNmmk1gO5sSeMLwvsIfV9aH2bQSVSsblRIk19g==","shasum":"7ad4cfe391999f6fcec26d4359336f7b081a05fd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.78bcf058.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdBrCRA9TVsSAnZWagAADoUP/2olwKwOZ2wEd88wukk/\nygJwa3gdMrLqa7hGZ3yNiAwBmrwMC2TEwsMN7e0KcSPahhF2oqS1Dhxk4vgc\n5LprmiT6x4nVsw/VfJkFnPdisqpO8T3+EsvJ3TGcqTKPz7m/nRFWznpwXI7b\nNJx/GI6+agvlU/b4/mLgNGdKQNkTxwT0jAE3lswngMOQeLE/ZxrPr17Smp+K\n9VONVp/m0OXhTKEmA2rAB1AjXDw1LM5EDjbgP1cON9sFgNHo87pCsZnknWUf\nbnBQJOFFAOJidnpqa7Yyotp76JTCEwktOhTQ/IJGtKCupbe2p8vcy5gdoauE\nSuvkdrok7USKMUV5/H8q5V+a32Vt8sEBRvdDYiabMncMKKQ4AUx18SesJyBi\n6dt9A/0WYVUvOqjTgZTh1YGPhDZEl89nG0xXYlmFogp5cpV7DCm8HSX0U1oe\n3+XCwf+Faw1bI8nsclhii51N9c7qwfpXwszeoqhzQ/HPS+S3sZncfMDiIPqg\nj0m1jSoEUA95skB9s/J3nqZNqmDd6Fott9weV5O+QabJomGp0JoBbyIZySe/\n+oCvXanLZbcBfLOBPBAiN/m4A4/rRxKcLYpoMTVwHOU7a5ydOva/x/H/6B0K\nqP4P8IHX9IgsHhArXu6Unjdn1NoKMCIVh8NKDkuj3tQ2ssQhvbwRWUUNdPdS\nnv9W\r\n=z9xJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGLFZa1KumI+yJRDGpAUC3yKZS0T5vedIoyKAobftFgNAiEAolgvOLNZdE+l4Kq+OT8O93t3GwWpL1yvQOulA5Yz2ug="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.78bcf058.0_1613090922604_0.6697280432232469"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.0c6908fd.0","@material/top-app-bar":"=11.0.0-canary.ed88df700.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-8vVXTMxWbJcdNCSgHwPAKrQbmGYYDWzs0AvtbEIt1IjlWZhm7d9egfhjE8ftYbREX1t5VPa9iIQ8MJ+uhLCGMQ==","shasum":"deea36fe0e068ea932510dbe403ab395b86cc6d4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.0c6908fd.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdj4CRA9TVsSAnZWagAA928P/iumuof/9kaK28R7nFOi\ntvI+3dQejB41NL6+umVjd9Edk5B7KRqLVXlh14DYXQ85df3KcwUkx/HPjotQ\nOQT16v6/NRZOgbd3XNDFl/TDTlMYJ2vtB/jGp/CGr2GgQ/8IcoWxqoyoRbBs\nIaCbgpMwfKAcc4mLOPCblkHIT3lW2n5IMyYzXPhfUeJ2QMzt3k5zJVbsST0J\ngWFFh+mG3+RMDqNscjXGWMgswdC85+T+uQRCyk3STpg9PALDXKevn93v8Rzo\nyKrz1d2dZVl9T0c86MFlFuBu/lHzc+deUH9lHhJlCXERxhZzM+rgs1GW8541\n0/AzZV0chXg4cCDpYM+13kxBLtwrl+NGqKr9tzc7CYEqsxxp85u9T7pZjEQm\nAOTAuAQnyBVtvMiQ3VDUfTrNgNF+RHYdQ2w3NkUahrDIXpYL7ziWkNk20XXO\nBTXz2r57OYGRc9v0B3DmZSkFdt+SUYyB8h9nZAti+0cm8YDXKPPsJ2bxjn2s\nkUG4N2FhBqydiBXiQrM0hTee20YBwmk8OBqQhLt1kqSItqgZa9TdM5zjEKTn\nxXXsaj3WePZDulZ2kLvYEEptAC7c9xIWbjS+QOcH0DUZWcB8w2t5vtEpvx9i\nInzbX8vEd6eiGAa+1XIQYQ4UFH73pHxCoL60/DtwOf18NtCR16URg0q0gPZu\nNGJP\r\n=ucMD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXhtMlJvwQpQ33DZpnpkG9wgLTNEsrv9X2aOgasBYkXQIgDdU4kwNCT8hzuHewcYJUQqWyzO4a4kdcbPHGS8YGc7A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.0c6908fd.0_1613093112151_0.8899736433830354"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.f1f34ee0.0","@material/top-app-bar":"=11.0.0-canary.71fe9a067.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-nwbUHroMxQIagHztAPgnkX/M51Z/fdAF6AUXw8RLyDkeygWc3VLcNTcu5vNHsGg4ANZ9cXcJ/c+eLuHy0lWCaQ==","shasum":"32b18d5f75d02f660a3f6228819be39cbc8c3a4b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.f1f34ee0.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuKSCRA9TVsSAnZWagAAoPMP/jeWCzQ1YOtxdu67mkw9\nf07LEkibSLqxps+zCaDs2d69QpcmGyv8iu3aXe18vQL6zdoWtSIWgjImj/b1\nGEBU3F+MHKn6RqSEQJE636iSTk7q102FKD9IXU0sGJTtts77y+oWkNV5IKMN\nB1slrBhUCO1DXHxwDREOyWiA82veF+ztg7ImbXDAaRa2B6HNKosnfcu5BBtD\nc0YCIax5rW7Q6IbSkX+rUCFYgbLThvJoSNqgZFXJYJRgs1Eyn09rB2dHICbS\nvL3mDh0kvx1joN+W6M6eHW/EBBpgh3ij4P8s3Jw0T6x2On6Wngr4mZ1ubkeg\nbdoa4tjhLS/ElIqReI1dVJvjnS3wHWlwiElU7AoOMZqR/sRmU+5Kcb3sB7zo\nOWi+e3FD0/3fVFBPBTWXKA2sX6R+mJ36X7ZfL06xuGab/NzyHfictsIqwH4T\nFQEQ6Kt+iBrXVf0mj+H2ecKCY/cadCx+DDcEINqYvD34WEYwcniR16h3gknL\nUuC/wdOYZoZOf50yiAQwXZkqUV9h3DrJKb7NwlHBno1gULS6ZJYJ9qRjwRAL\nVF6s2qMzy1zIRkShT1iQP41X3MA8h4xVYDM9nr7uWJTzUCZUDqrwap3vk1Ub\njsrAd7EZE55cL+LoapO/6FvaNtGMAVVqMzgggiRPPQNb7vScdAqVAubu0yuK\nLuTz\r\n=Ae1p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAU3/O19qJwpe6rMvinbxRwEq5p3uS0ZqxmIFSamXekYAiBRL/WsWj/armn80ILuZJAnRJvNSJoa81JP8bW9ElZ6lg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.f1f34ee0.0_1613161105700_0.3708136109540503"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.d84df029.0","@material/top-app-bar":"=11.0.0-canary.0fd56a86b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-Ou2/Z2kWUoxGWeU2Pv3a5G84vLwSMGArM1+K/dsAc/PJqhSeucuO6bpmQE7nXOERL/bs6V0TCZ8sfRTYPowyHQ==","shasum":"a0ee94cae49dd3ec5452df5adbd81c00b6df487f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.d84df029.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBg3CRA9TVsSAnZWagAARlcP/AkUUs3SvWFCBDDP/QK2\n0ETEteVWi1tbuHeM0gG9XFvKPq9899vBtAXlhcTnB1qzWbLF7WAjhAAzx0q1\nZBfcZOIwSky4grsLJZ4GePNu8IdaJBkhU4O0VR3oGAQhj8BGztnAEjRnzpBN\nLoorVLhrN4+AsN1CdZsIRIfdG8+KIPNlvP6Dne36OBYo44e0ThH01aBiJfCq\nJxr0XehJ/zgJ5ltlrhHo0TACvBgbOr86RnQAb8PLwQzYOgP3tTT52oPkkcLZ\nQQUOd2ALhcoFi5jQ8AMh9RtzQWJS9Arr2deSDRuQtRrrIcIWiq8S+HLjxQm+\naT7ku+3Up0Dc1v4EFUTiRknDg8d9nZt7VWw3aOgh0wj1/hq5S9aFPkkFS9Z9\ndrIfinEdCgQjZC0PfnSQQsiXHESOxr0DtzptiO7J5WmKSyC53gTF99Anufyw\nNSfTW7n+VCpLMD5oQzP28cnkIMBULyfIg48l5pRI7NPFy2uGfaFMmMJcCYSY\nHdim/DUBBVIIAkiLVUKp0nNoFvUrbhzSFrFZRKPWgedrlXdgHoB6Oc/VbtEc\nsiiY2gHZrmqX0qEg0ksHE3JZxIoz1eQbSmV0nCTV4AH2VY/7HfOpQdVhTZEC\n0JzK3HPTqX6WH6CGz/A/RPq83Ipp9AufjH5QeXcEYUTCeb7V3B4Vh8VK1O/y\nGltt\r\n=L1q0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICuR+gpoJZggRwGbcBtMVgRJUtJqCgNzFQvaabbD0YFqAiA4CodXAOh8B1y1d5O1q5HaIM2HMs4jzxg8y9wajmGwEQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.d84df029.0_1613502518532_0.6792786351126212"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.c525f471.0","@material/top-app-bar":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-7n7G8DCoEeoc/5dQvHA1SImLqEZAdkfQfcCTjnX6vOtk8iWadJavIkP7zdCLrYIrCCESVvavT2+CjDAFvXpvZw==","shasum":"35afa838972b8ce2d237f5b648634b96753df086","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.c525f471.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYJgCRA9TVsSAnZWagAASTwQAJdc1lUyLCvok80yIFB7\nuk25fnQv/9iAD32zdTABUPThJ0UvksJwpJy7IoJlEVoBCjRCmN+y8yIo+/EQ\nAHkNDW3Tt4XTRcsXykSHYChqUBkE3Hbf6X0t3OJr+6aWrov0oor4T9vjR+2m\nDgTezmGscoTFSBlOLsGCdCqt0el5ZmiRm+f8Uz4B3dikXqQXx6VtJa+SYpjh\nXTxxDR77kS0x7lSpHXPuScqlWqNF8/1kL6GmFUHbMcINiFZKCLBNfwANPcaq\nqf1mBpBvFR/9nkqTRAxPKLbpr1jb+D+4gbCQo5PWxLriqhZ6NS+D3S9/i6O+\nH8iixUKPqc8et1LuCBGnsBgSC9u39BFazpUOQ1g1HB1NFdD9vlp0aXKN4gJn\nccFMMyn+sjwivRW3TwjQuI45wWI4VR+F3qinTXpKYYifGTpHqsh4f2ZfTvUO\nsIqHuXzgk7yao4S9gv4xJYd+db+bBM9nTPXOQ1Vjzsr2dPBPf5cCqqd50Gd0\nd0moQQiFIyHmNZ5pJQc9NMJLvqfp83i336ae8AtAEL3RLjyT8MG93nknkYrM\nO65p4REjZhR76u7wWvLnNR247LRAo1b/Y8C7dBuaWYsQH8Ug45PHssGpg0NQ\nWZgxd/nmiX4Ko3Do6TjV/8wB9CV9CwlBO/8D1DoJqxR717OJFwy4KDT0ZXOM\n2r40\r\n=uc5g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC83DF0BHaqvHdayC9vU7ixnhS0uYTrLzt7zg7rCOyhYgIgYPTXc4gbpfNkmdHH/mGioZSb5KAGAcUjJZyrfNcxbdU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.c525f471.0_1613595232459_0.737287733202459"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.ba7a1b35.0","@material/top-app-bar":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-ab8mjoiA3vmj+llj5AjnjSLyKFJawkfZWpd/TDZBMpgV+SKw0SSoXZg4U5YebVNPBhYKi/YSTBPggBsFcNHnVQ==","shasum":"6977beda2b6daeac4f02a994940ccef25b951a8b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.ba7a1b35.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwLZCRA9TVsSAnZWagAAHpUQAI1PcnWyLxOo7zBuc0CB\nEfXW2S9Ymx3sFZTWl8DMV/TQLnLV2H+GEJfkxXGxdiGYcUMj4R9kL5F/Owdu\n78rRzXednxCnctiwMLJkaST/hHz8qlImcNVrhFmxXxLX9w39rk4+3TYAPlXf\n+DnkrX5hIgEohMbFnViByjgBSjr+YaMT7vLIGbkM+phLzm1gytrVdxgoSxDh\nB8xNttYofiaCxuIEi99e2/da8oCQ/nsr1/++uAgrFJvgzMF+asCl9FctEHfn\nXPb+h6u+va7kVVW9/knQzSVG8TPeFAakgmsuJDiBj0yXdximjSQ97KJXcqDV\ni7UMJP5NoCiZeiL5ZHMpiH3CPeloZCfAa9rTRUo5JZmbZdRSxYQNapXkBfXk\nWsVBTahzjlL4WqCCf3QvR95dX0ooMTXgjdd5C/Mqoj1vPONqFzfK9vpElUGN\nlgHPxdQNjYEBzUs5aa28FbH9mxrgbtp5jpPyx6JO1UoVX6uik/uwCq70YV75\ny83w60BxPpXSwPI4jwww9oDEIW8kYkAojrGxhbFH9RaN99LzUNPQHdMvGHat\nakGT9rREs+AvNjF9/4CVGZuN5YiVz/w4Yf/LQNFAxyN+taty62YZjqKYX+qD\nJ4cgbo5j6/F4531OrlpaMsaRSGa8hNVuzN6S0wEivFgCElbW/F36hrn1UkS2\nce2C\r\n=hHoM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZAcgkZrySh9q5U4jRivldf1GlYhd39yZS81Y7YuQt4AiEAvN/C4swyPLxeNH3L5F3F0AzIwzI/iq+0D7sNFhgwiC0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.ba7a1b35.0_1613693656806_0.8027380662179766"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.9a566dda.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-cwuPpmX4AkudEYOn74YkdzH4IiIK7814l3MrP5m8OqrbOQ/m22lFVX8Ag+TQoJiIpJUy7G0QQYvDn4IgXY2PIQ==","shasum":"8f71ae7df153d2de370df7750336a1eccea30b7f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.9a566dda.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAWmCRA9TVsSAnZWagAA6IoP/2mgw0nRBZy1eGbPWkOh\n8wnUxWBVam7mtWrMMIXTxeIfi7YFb81R5czEyM5Czr2r9ZjlfiYr09cQUzEF\nlVq0Emul1K4rvoe8TgbdmNHAzCcnx9MZkZCUxsKpsOc2WMb35uzxF469c5ua\nq1fy1HnqQPdvxDbiO8WTtqT5dp5z/bCbNrxFlttA8kOMQifmcosSjBfOUsUB\nVAGo7677JubSV76MJwRpoEtP+C4sfechFUkFIfMyqB6AQI1uD+Bm1F9xkvXK\nHzuHelHmu/QNIQo+q7hVXa817p8EAEei1Ew8VmGQesZA8jGxoTRvy+QXnMz9\nzUrHF3H+pduQzH2PvIV4V1ZrzclirRz7oO0LgltSUDM7paLx5B2JXZ504GRC\nYfb9/Sh8i3iEWF2NirKswEK1fFAk/AcY4IvaYjNrTWxwmfmx4iSdQ2s2NKRJ\nJgfpmrEUDwFk3zAoy2EMzNo4rh1r7avoTcOAcEfDM/9Bfcub2SzQuWvXNGAP\nfZklDugvX+16C7HXRZ5n51mVPX0WnEESe7syZyS9763aDs5ZFg0RKfHB3y/D\nhu3Nhb4YwHx2QkeS/MmhIJwGOvmu/cS2zORPzN/M2JK6De0CnywcjUcFleVn\n5eKYJfYY1wXnp/wDsT1anD8sEpC7urglyFNFZwkCOV1blgrOgV4r3cKw6nFC\ny3eC\r\n=KbxP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD11T0Or3xaCZbB3wpq2j6aAHlGbYwOXOeWfqyIKD35EQIgObEiYYG/027KvADVR+8PpdgRQ0iKDzt5FxT0+0WYVCs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.9a566dda.0_1613759909696_0.5387846451730545"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.55addb8c.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-0bAuxUAT1SwOlljL1KTNfASrta+QXhmCeLK3pwHm3cKhIdOwD++rzQFY5knDX+pHiMB6HC966HD72o7gmDsqVA==","shasum":"4c704b73ddf3d0a49d01e2389389fdf78b9cdad6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.55addb8c.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDV9CRA9TVsSAnZWagAAn0QP/1HJMRJ4dYlJLMg40Qt4\nSONrJLEHBZbSf9FiccnEQ/lWYrvnunG+EK8t2w3Aq/OHgVosdCPyh6wdUTzs\nYNgUzyI89iU22yF+5CrWD6hnw7Yyw2lCTWogwD9i0eWqE4+GM7m5lVv1F3is\nhrxCwY8BWO6Rglpwo76yPI58DsR51ZiRO3JeiQYtzqPxalUdX/yvBzxkOaE2\nshGeKZukgvUynD0spQ2dsT5O75vY4eRro0TufGjmrufQyL4ynevk2badauCU\nqQSd6gZzUlykFFP7LLgU5gztkZg2DN6z0aHSGicB1MN68Vyx+QSvxlp2gRiE\njEkCOMFv9z32nLDfOn17dhFntijKYtjyLky6ETGMerPmmHAZ1y1IhwbuFsoR\nGyz4+ZbcpoXyF19SXm1LEuBAf7XJLlJ4QKXBkZ6ZoLepwDj985etzU9Etb05\nl2xUH5JU0wiSKplmDeyN0w6QWMbRoZpQI+DtK5v1QwtJze4HSq1euAdJnJ8m\nTzCCXND2d1FUVVuKgzy22ZAlk7K/i9mTERZ6HV4CzpSwp3MvinsdsXVbHjqH\nUfDPKRA4hL/jrf8EZW4XITiPdjrZZruGwyIMQtja5zpt6pe1af14x1v6hN2N\nobZpryki9O3SYH+5TGFxrt0sXD7wegIJDLj86qxtHDInE/qGhupFYenYMl8h\n5J/z\r\n=tqPo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAi7HQILOMriI2I3d9hv76drbgAxl2r4RZYWvxktOb3AIgWj57wmE7/HsITGYD34zLGhl1ao6qPvkKCAyr8d3uZso="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.55addb8c.0_1613772157271_0.9527653724476128"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.85dd5e9b.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-nk3hAvQkRWyX1xnksYfEob59y34rcQF8sht6LEB3cWX/8Y9wawTuyZQIws8E8CESmKardqyK8OPaISsHU6GHCg==","shasum":"446c25f5692263b3bfb1744d3921fc6b98e5f421","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.85dd5e9b.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGZCCRA9TVsSAnZWagAA2ncP/iTTeIAlrxchIYE0ScY/\nLiOQpYxGGJPiavOHY2mjG4RYu8o5V0T3gD1S0D24H88uuMYvpF1cXj47qNL9\n1yRugfkslMD4r6YZp6sLwX+4coS7GW/kBGxpiIbcl1+/H9LuJB7AvrX+tVuC\nQvSy9Oidw9io0DLZheBHBzr+viJXg/7Iu5TEbcitd+EZWrxpOmBwWkkHuPzi\nLBJPavZghkEf43Pm/B116Ey5LfpN/Gqx+XsaR2WhAYk2BnH+GL5uj9HphCya\nETi0bfH7d4S7qFkFFO97vO4OCiska89J4RvMWVXCbV3Q08FmqUeBOsYWjmvV\noa8LgcKu+2VigP27rFVtBtXb2T4YvM9l0fbQH+TRP055rEmVXZp/RN7HmQNL\nuUJVjiTBw4VCDJ4BjMBMJnqhd67NqlICYbtsONp6TnzILh1SxMFuDAWPyjI2\ny27zVRxD0a3Lx4YdTuJQ79kVJ8zw2IPfWaY99wFHcT91/maRuqGJriJyCmTa\ngDp0POnh2M1ooF5zqNBgqVC+tUeF1tRVSlO0RvrLWUiXSmcCsizkOMuTUNOC\nXoVCKdZR0p0Aa9vTjh+jKAB2UPrKKTkWiA88QVZMgtNvrpoakxlhdXIPBCtX\nI/u9szVUqjZ+y/+hjPwm6emIbrFZs2bJ1Sr6zFRxBuHgZ3mqzxb72aDcF1mQ\nRyPy\r\n=BfMq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIERIxSDOOxBWbOfp9tD1A/cjTVKkFXccz6F5sJpSmbz3AiBOlO7yiMm5yvgR/Z27ug4DlbUFik8uzAJtPv1rGkIGsQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.85dd5e9b.0_1614046785593_0.23119702163278855"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.aa3e078e.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-CHylGOe1MIPoYk0DQUtMGGWTeGBvWNfuWegRlv4FBBpdHSOinvW4S3DsTlngbgGItDsV3VM4tghmmTjKJE8hjA==","shasum":"f23b07f6208d137d91a2ffe9501b3cf615e7dd6a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.aa3e078e.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNTgxCRA9TVsSAnZWagAAWAUP/0t0CazwLDhffAkJ4DBJ\nIMSyf44bW8tT1d06tYsiS+Anxk4UwrfqgOYI0U+vdO5wg/FJRal5qBwdHt9U\nRES0GXlYvH+p9flRZYih0pcvSmwi2S+IOB4pr3PndF5DWsKzfjDYgJQ2xBty\nNejMUtDb6nQ+IBx2n52ymNx2nPFf6IlJJUA8pIFD8BuSPEUf9dff7gfgIc4k\n/iXMXAyOGXCV53PF8/m8NJWKlrfsovwjlRmXAj/p9o2GQwFSmXEIpBwHD7gt\n3t/v07w/RcC5QfpbJSo2uj2kmdqD1tjZObsWLFv2/THI5MYFjPoojLh3wu9R\nTdxFJ33y567UvV1qOnOcQV1sGcsWh0CqxE/PLaaM1jcyI59TX1e9Cy1l+vgo\nJbjAiEYhBmysAxtIGm//B+iza0jOT4+AQArSZLO+LfzsVcSRYM5/cQ1XOoJQ\ntg0Qo2wEwNy0sZt/D+tRRFyNT955Uj1yai1EoqM8bk8au6TrzVq7TCy+lxcn\n1u+D/uzpKQBy7YRAAPjgB6BtZ/dlMRRAYiBVCGAlBIyesZ9F5PSm4h1weq7o\nuR0bActCNL+/HPSMQk5RHoHQdUemFjpacMLcSCRuKrf/q8p5AzM/eQyO+DYU\ndyC/hR3Q/J1jEr0fVd9qYsnvYmmTDeYj+isNSgtcVcJ83T50NAzcNcRd4bkJ\nU7fu\r\n=Ghwz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtd7KsM1xBTJYlcwlIWCRx7tAe9PCR18z0ACH7mR5YewIhAMPfXvv8elFOnDxIRzYoQvLFPmJmLKuCpdEWoR1VLdB0"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.aa3e078e.0_1614100529388_0.0052629392840761735"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.dccd254e.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-oAqglK8wB/8tlnJpOWujaAKQ600///FTHS+hoevBx9Jcdit9VX5TroyariSDWhsbvT+wv2mTfvvv4382TgrbWw==","shasum":"7bdc72c77b76500828176821f979aaad01703e87","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.dccd254e.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWPOCRA9TVsSAnZWagAABM0P/RM6VHM8phdohqwBOUoy\nU8nX+RCQY0ke3hyH0hT4laB2E3ObMTPvHsU8pHM/oXhHdjeHFdfTraRetTVX\nLf+yxj6tZdcWmTkr6bE7CZdKLIIgzU8CJZlc9sAoXfwxL+pA+bT1Eg8TNFZ0\nKzxoty6WbFEDKNM7EQy1a5vURx+9mC+XN5vSxeUMmtodb2yTKGQY4VnzdbJ6\nDWwjVM18bWnSDK6CPi2GaH9Zts+wpRs66qd5qzpquM98sWXR66Q+OvdE6AKB\n7S/0OhOozhSJli8m1+N4YZE4JjMwoUnqC0PrlXJgdLs9jkhoBtiPUBtqa5en\nAAfml1bsDH4EaF0Xte5HTOw6Oj5yjULrLmOvFress+SGK5jpmbtRl6aRhrzL\nKroNf8Jx5D94unGH3HzAivxvUsPtdt3yMQ4oteoLu40fP+SSjefa297kjL/x\nG87UJtpxAqzYVks57Tqg/313wesgCjemhaZuEBNK38g/triPJbBNal8YB2pV\nKHc/HRWUsbefVYvFUuua+DGDL4Pi4LPUWvuQlrRy9l063bjf6uXVaBd3fRng\nWLUkekAour6J6PJDg27gK2798M6y2FNxojrxU5AHiZb7XZzq7UkV/4FPcYPS\ny7e00Nd7JIbMNNVH9mhutIeoWBaTx8h8pLg7/XxLOjP33ZGSchMHak5n9xEZ\n57r6\r\n=xbnw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3Mu+4nOXs4b2j/7e35VQi2C4xMRtZ+R/x01JqJH8V3gIgZBbYACX1X/Uxd9stComLdS6n4g7jiTCJwhAohHQLJ1w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.dccd254e.0_1614373838522_0.5808541396971909"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.7dd1a27d.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-XeVtZ0oFkhFm4uUAt2GaK8FlXbZY7aBUzbup4rtnUtqOEMymRW6zuTRlyKOh1nVPvF++cX622BXU7b0F6LtR6Q==","shasum":"01041c8770a975ab2e0bd4b2277f8cbbe561cef0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.7dd1a27d.0.tgz","fileCount":9,"unpackedSize":27346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWQ6CRA9TVsSAnZWagAA8MQP/RINNhoELqNK/UMsIkMV\niXLCVrlJ1QOnFzPQrIQ1aus1HEjGbRAK0/YLOkZ6HHRZcLPZAdxRncDpSI62\npgtZCjogqR3L/a+og6j4X/yaiUjToMt1ugp1EQS2sZlANDRynS9Qy/WXAJ6N\n4RiMCGT34G7y1GfA6WkqzTtsXfhoc2+nhUbiPYgY8UWOQ5jtU94eluYzEKOO\nwCqjGcfLHDj0cOO9pbGJRnkjYjKtXw02H/R2OnUtnUl1UyA9BbGbg9wcpFga\n+DlsEg/lwkcYzFCwjT8OqKecuZ8ejnhmj+LLjg9HXT9501m5+QbEU0jD/qTQ\nl//px1nMRmPF+ueKj4lGeIKO0pkIkP+NLWrLyIQa61iV9TutdWMSQ50SiaI6\n1fh6d3YAUd+hBn3T0aN4AmiVdAMBWXk8F0Wm82EAhDoSa06xOrLzw125BbQR\ngpofehrAXBUgmXivvIViz8fBYwfb6QN3k0jhnd4E0RmEfGNOBtQmxkzPJyRk\nJjiB2qb3p56nY4a8MsDZ6SqxHUyN549v6omV+42CTueEhfpaHjCQQChIsFnv\nHLp12zvFtpmkbAp7y8yn9xQ5vWnb8hPcVcLHWTxlLMK44MNrLRrNQP8uzvy6\nkqLxvMdDzbG1aXLckxlO2FCfuXhPeAtiOcfVsls3HCY/kIdpyujgNVpdXbGD\nOCAK\r\n=wBy5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlD4xRsphS6ryGCP3UgUetOyOC2ALcZL09nfNyWIOH4QIhAPc+CYXoaOTpVhcvhbNaPwIz5sP7rQcJy4dzjJs/8zEm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.7dd1a27d.0_1614636089927_0.6929933010015246"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.12574572.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-NCGdUxmWH9001omrB/uJpAAhPhopvOYXFrHGhtdl4ZVmpkfZcweqVMF5eDlV5WO3G15zOcR0iptphW4ekL189g==","shasum":"ba301d75eb1e18ed13e2c955901b4e67eacc152e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.12574572.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqA8CRA9TVsSAnZWagAAJFIP/0anPNRpVhsc4RyUx89g\n2Brqgaa4Sm2XWHxZzF4GqvaAeXczj99iwRX8w2lHxEX6t8ZsQyxWL/g/d6Pc\nd5D1FE1dShV6rW92nsLXIR/9aeHSnfmvkXhPh8WRX0LRmRIgIGls2QNhv4bq\naJH5XHXDbxDQY6tbFTZjzop83RHo6V0JtCib0DBplBqH1ZCgyecLuppkOxOh\ntZHgHVqOGq6RyesGmzKfqzG4gWf01/YLUdA3fjni5NLUfN4O/oNRtgX8QCYz\nWuwAaYvyW+VBuL28+cBpu466EndjYe2OdewNiYUjNIInU7Y2s8uSWYvKIVUG\nefgtVUcg9aiUrMkCLWBa/hFKyo6hjOhSWiCvLxIFwrbbgv0YPCdMEKjV8PmV\nXbWqmjR7ypaPLX/BtBc4yNDAtdcDDImgbwcYg4auRcIELvTU+63wHpYi8P9b\nlyRLd+H+4FsVFb6qbGy6189uGXFDOxL98NesUBWTp++NQf5YmO03UcdiYQIw\niLnls6SR6GeP6ZJhY8oaqsizehN3jhNeSY0Jpx9gjcKUNOqvoKDakjcvV6Ep\nNSnE3P3xGhsFLJo0flgNQ+7xIRZROyggBmeWvm5azB+N1NQwLhyW9QLUlVgr\nO6Jv8RSgOy/8UFHoGXXFnI4QLTwsV0Wr7z12ZjBuXPQi3BAtsfsHiUGjHTvB\nRiKc\r\n=uyWO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDKXj9NL3JbTys+Z4LZJ+LsSWPzVc7O27/8EdXqL07ilAiEA4GX0Yfck+cJW+761pTMIGwsa0bO2OnfgttcDJpyHDcU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.12574572.0_1614716988044_0.6415050301453518"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.1109a3d3.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-R3lST7FWMjRkJ2j20546OFs/uc5IeN+6P6GP1mDqPHnKQoq5x5J58HJtPwykVhsjEN41/gtnmelmYrAGnXv7vg==","shasum":"3e15f8cbd175432aca2b5f5ba6e19007b32486e0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.1109a3d3.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqF4CRA9TVsSAnZWagAAjS0QAINqK4GrPaTBQeI4vV2k\n7PAorxfBRLVGXhabSaRE79p+MREEKkEP66Gbkgar5ur+YFYo5qMn2vMBhTki\nOp1+VgQchEdY+ov6dotBpkfEPMo38BxSFxxPcXzKQ+BPnVy+88Elw+ZR5SgB\nZwvYCfuNEpiBQn3wWKX7Ch9zHjmwwsbwGMCHRDGDouBHnNYo1V2Xlr/vbHFn\nTFvG6Ef9xvEDGF1HvOslztJ+n1Zll1XKgzYqlEnv/W8nBVUoUqTMtDUZlnnZ\nj9zYXjW4zDVVL9WCaQjrSIq1+Jj8o5BupDv9FzxG30S3GTcWVyOGzs+ICcUw\nsp6aVisoxn9r8LAto27aKoSQCIcpaBJskgvlcaWwt55yhok0rOSUHoQy9IfH\n4Y+XG9Wf+mufo/nqfGSJJYulHdp/oc7Rn6X5LJ0V0KRGHjIAzYnl6hEiENHi\nAs+Ju/TdsRQEzjPGmZvM/Kx7kORPf1PIEOg0g7zo2oX1FpTjFTdy+whRVwVl\n8w18KUL9p7eOc57Oiv/3qgU1ajIRiNmnKnAtMP7ePcWm3YgLNxQJ6Nsq5hlh\nrAp4ex74nvdVu/09RXLZiTZBG9phhlVXeHNgt9TZ1H57CFgoVzEZaiY9AHM7\n6jks+n9B2qBQ+zYzIlEFi2+Ah0PwWGJ+IUUNonqfrjVDSZs5l+ArYnHNGQ2U\n1gd1\r\n=rIey\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHNIat9Lvqu5hwKK8/qPU3I5AYPb5BcX+ueINtLO0dqNAiAZ6nzwSURkw+20cM9aLXMTQlHcK1zrFTY8AzqUNuoLxA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.1109a3d3.0_1614717303793_0.38695502696398987"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.b9cd8739.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-zOudw6TA5Ss9S38/YZ6NmyXIM1SKJPiq87oxvIzbIoWWYv9AjJyOM1PIbhbYaZiPNSkEnI8RuPjqPBSUKgSLmw==","shasum":"af9a181f7a04b455c46093a9324578b2702725da","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.b9cd8739.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8vfCRA9TVsSAnZWagAA9qgP/ArzJEYKR2o3SSx5IYM+\n7f0sDgECj+v7asjvwV2KhPviqqI71jrCBk8ojHuA6MBwuK+VlHSc7y3a2pvg\ndh8tICA/v1yghmzmZN928S6+sWKuyKHmej8njWWSKZUAvSfEZlshaI96k1cZ\nYtDmvQFGr2Zkrw5syGFAA9acZ5eHp1YdxMxiU6kdi5ljFGppFKL20Ade7Oyc\nhKrPn4rM+/FNPVitbRwklBBpST/Kym/CKPwbrrqM2PyhWO52aWkuAh5ONRo7\nTIJFgCNzOzkoZkSstnyxGF8bRFYyATT6BVD4N/J6i9yTjtFUJwuFZ2XNOgDa\nCtl3hAkITk90xL8sYAQgt38H6sGKbyE98DvMhb90UB/qg/XcGHXUHbjS6IAT\nsP6WJupZbbeDkAaot5Gp30GINXoqlosRZl5GGfXVnYiGWL7mhiUePkqmCjEG\ng3VgXBE497OEWWgEUnJG42ORUJ85BihOWd2hdHfoA0ZyLC72+u4WG3ipsvFg\n5J9vNDcb2TWcC9EkoLAD/vmSy3jtnrRCL9fe+H6+jcpwWLbSSVZxMYj4aUcb\n89Hej+54ia9mSuxT2VYQdOm7YECQAETTmISJ+CDWFsRxhBB8Oz+TIGw1VYmW\n1tx//Cb4sydV94rO13ufl+1O/LqOuaRETeL6ZVyzYCqgkZzHdGRGk1QrH9fI\ny06u\r\n=GQJ5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDNgxil6h7VXatfu3nmF6GNF8PBc8j57eNTMlq6abMWNAiEAuINhPdMV1wnBBBRrTCgjd/H1XLCS8uhn92NgS1Tv980="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.b9cd8739.0_1614793694788_0.10305567847939945"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.71ee796a.0","@material/top-app-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-j6jF0BGqYc9nTU/zWdGI/HaDy8jntmYCFeT2+dssDtZalQEcTNbgipnKRa6TNTYQBaR/BSvKdkeBD3XfdZgjHg==","shasum":"e6912c4830c8bbeb86c1f7cb289a2aec40692395","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.71ee796a.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+1zCRA9TVsSAnZWagAAC/gQAJE1awZpSCOQciWQpkVe\nuehPn8Xj1wU0JD1baXE0kvvMb6yngrSwfunhrKQA7MREiXo7v4wA0wUMGaoZ\nlbIsXFe379/lub/t4yrnXxBOxVL8dooRuVQ7BkNbx8HuCFzdy3dTB9G/zasZ\nGHBrVZgTMWgNv8WaGwv4QaFKUCb7BdBkaO7HZWU9xVLI5dBgl/lsUntrHydB\nN/IGwH+qJWKtsoT22mIVekF2UuHZI2Ca8h2LYxBhOS/RFHT/TP2eT6z6PM3U\nurj6qDXA+xWEXSYOejuHCieGxpHkF2X75LSL+MNHgoWTgDyAiH5NFgJbwXFG\nnw2OlBtvd/pq4SfQppfGvK5bz6cPDRPiLbPf0FqVNvf7HlNvdm2DSbLqM1Yg\nlXseQI6t07sNgAf9F20KifXs9HEIJeo/JabSav5ohMTBcrbyLtTpTkkiV5JC\nNkixswlyVVUvSxyHyXreA/JJ8517ynbMaRppltkPALSSTuPGnSLLpc0dY/SQ\nTukGvCbsp7gtaEB0D8S4ZgZ+CZmP5F8jeyM9uZZJYkCrxqCFKrGqf0q4LSyg\nIY7irYsSlBqqkybJgHoXDpt6njyvDEqA0vquYlsmw7gYfIqkgwb0W9Jn38jh\nw+rBq49k7lzBjfY57+UnUGKN97CxRJxn6cO4dD3OkTEocGLz/pgVnAXQCGZ3\nSMmP\r\n=SBes\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFm7ksT+7U/kav0VC5Qu2D/5kmqp9JRiTcw9sbiDembGAiEA/bjBJKUlmLTlBH9D8HBo6h2xCaHbBCVCOJRSMyzS5rw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.71ee796a.0_1614802291488_0.2919623596466343"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.2be191ed.0","@material/top-app-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-HFspdo48R3r1f7q3IBkHz1smqBQ88FO4rZcCfDgl4QOxlTJvL1CtBrVQM+SRRsHsQtfT70wclAQAG+jJJ5nkBw==","shasum":"0e0f6d648a7398b8cf09f4f1232fd0a5fdf9a8e0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.2be191ed.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQAUCCRA9TVsSAnZWagAAl8wP/j4HFbIxIUAHBiNmCW9m\nJ2g7/MsLU9xzewM2oMuGoXlNkDL0aKpylyc89eLAyKtUW+8JCvUeVq7RRV4i\nSWOZDBqIFyIe6x4I/MN5biNOpPMUcl3KVtvkCSsInqek/Fx+LJJslMlKwhHD\nWp23F7+n4aZUv0iKBMYZAff62vLqeHrbC5L42jZMVS8x6JutgHCq1kaJ4qEq\nYP2/rQHP3V9V33ZsLQtvEcgxHqKAVrBphQe6mP2DiGOK4fNN427XvHRXbqOX\n14tEt5RHfkjsxKDYsFpIP1qaAa8XLKqhNS1XLTtDzGAc2gGoipFv4kYik0fD\ntckNRgo4911Km3Kgp3zMNxNGoqLdzGm+kVPJwU78GOmVdPiSh0rsSiOqlAOp\n9XkgiI+NpQqEYEehC6bGYGEuBZpEouVzjOjBVWLjTBCvxJOAxlrj8u+yAagr\njfqSp+2sFCiuIm0jEAjDclAs0bbrI9JHpgLjcB1+Ezc/ZoeeTqd6rHEyIiRB\n0TNiuDZqmNLVkpJwch/Hz/VnMl9VS0xIn0E+8G+mbZspbKMmSrfdFsdTR7rP\nsmEe2iww+FA6Yen10KTZJmbh+0Q+4Nkx7UfwtBnnyijrE0PZvFd0Guvr4DXG\nrpApEPWdy6B49CarDd+gBzy73NXIc7Mrzo1PFVhY6rOXzNcFDsYx7I6jNsRE\nFAgL\r\n=bQcb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB9YKbT8XUVLUVQ9VhQSB57DohwpJanar3vZtlUh1DuUAiAbphfmPxn5jtw5nA6Z/5kz90K6gDfQBuBAE+ZB5RoPsg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.2be191ed.0_1614808321576_0.8393982753009877"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.6dc7b06f.0","@material/top-app-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-62H0LqI/ATtDjrCPKQzN5Q1U4e+luaM3o4pvJdclxHgbwr58+ljWFsaLM2e+A6HuCdnGtMnNrFQu2udF7cmLDQ==","shasum":"2127c4c9f37e5ed7608c2a5f6b01f8f0b31b2e0d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.6dc7b06f.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXnSCRA9TVsSAnZWagAADccP/iEJZbMswf5nGPm+nNXF\nNpNmXONfYRYiIQe/iQ8srAvb9/auycnJg0lxTOMiFHqD53O8DEyUQmyCbxBO\nRKVwh3oqQgqELN34/eYK7jKGYExNEfLzaGipFwf/glShMTudZXbMnyKkzrb9\ne/ZNaPDFzVivYWy0ZOtsh2GPlcYRjM8HW+lGUZFNR3WBBGTIuRON0qoLs4/X\ngimNvAUify+3fYV5OBkQWwVLgJVud2UBmdqMXvYxscpgz0XoCbuHUSqa5DQ6\nRLrPj3X1/ic3ipyEmTWppMwH7pVy+8x8EBDFeYusFAXSTzOSTegswdT3HaEz\nkwof6z52FD7y+UMlNJ+9N+eNR7uEE5FOOVn53EGHFZQss7tm0KZ3oqZQEk9B\nnTlDvQlLwF5xqQKiEHNAz42Ae519DGcBmVbcKr3GfnspoX7e7+FXMiZuWNHR\nhXpo3rPFkge1gPc3ZsFzWOfI/L78947+we6Jlr/abvaSqsGUVNqCTWlIzJ18\nB44yKqzkV2HbjW62moANcqDKPcAvnjdQOVnIokvKfZqwL5wT0gYxjR/zS8iF\n4tYxwwcUKvUFKjjuYtyJ1Tkv+zfvH4AKbeeiaP/Gd6w96vXaKHJufDLFEtKD\nNl0OvkEnBx2rBJrQA8tZz6GCKyHIcXSNTBdbY6jesek0iiH8F8GhwZKVR9Kc\nfdGu\r\n=EX0F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHB5Q0YkqlybgkhoWmnKzWOipE5OwDZbQI9C6XEco7LGAiBv2QIll9apCz3UpIdcIyRArhJYojC20Ctd1R6Hh5qLWA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.6dc7b06f.0_1614903762317_0.0644734874925712"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.24fe7ba6.0","@material/top-app-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-pIMAoIdMJQaQtwyipZQ9kHBGKNCJumfD3Hj4RlsEi1VYwy1fHVITgNLahggixpEuledBJOEuHRR8Ct8aEorddQ==","shasum":"2dbd30a6d86ecdafed7930a3f950fc19ea4638e9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.24fe7ba6.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmoACRA9TVsSAnZWagAAKlwP/3cFdndmEAxoEoUaGRKU\n0664vBcWYNhKLS7dFUV6Ji7ufBEGamO0NpdCpvWfY6tBqGg7gcTBAlaYSO4m\n4gMFiZ+hO8vO8IouABdQ2huXY7ieNGtbQz24EXv8+0TVIjePyCvtlZCg3T73\nV7IOUdyeqZaRCUIbm0LOyRpLfNlNeN21MhlGncic3nU37HyMx+J34e3gSQWR\nXvFWR/pYzlw4FQhvZjPApG7QDWy310AelbWXAGsLqwTX8/b4MbJf4N9uaruC\nC77WxoJt2quyHXkkrE/YkUt4E5MR54ywH1+CVVLR4ZDS1MohnjiVSSGGnBCE\nDEGlTx+W1cYXlrjKeFCtplYZEywEELWDG9Z5LIq8P9K9Q3hl/8UAuwxHGVtu\nQddDoDFLxzbknQroSLvhYz4w8xewccLw+ndXDvG5tGGGGDJhLX+6rGyVbagv\n7yDVrw8SpJ4AK+Qu3COxZpQRFb3w/0zG3iuxHlH2NLXv6HFMKsZSkTuqokg3\nHsa8sVgRYgSPuRd23cGSQLVwpspXrSr4oNpx14OQnHi77mUzH+OaX3sPMlpi\n0k6l9yNiemcEA7693sD33zTFz/kXNSTncvA1b0z/zygr0Lgn9zeSR3stGeU0\nVFCyXqgSpEQv3dvJ+qqbZaaA+YYktAve4Y1m6SQ3yC5mM+GDRH+0Xqur33uR\nOtj5\r\n=n1Cs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCy9/cb3UOqBzuFczRj9jL7RVylgRkfjNSNVuUUdmoHNAIgQaWN4dyMrxajOAomApc4hwFbyk7N59HTaj5jvctg7PI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.24fe7ba6.0_1614965247793_0.08996910053077523"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.12c477d1.0","@material/top-app-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Gv8MPhuHoFlYIyUlipHtV/K33UNtV6vO45vlzY+F9VKnPofQoU7H/KDuVGQ2l94445hFve2QFWDF741G/9SA2g==","shasum":"d59decafc2c7a34336222f5622b606064b46046d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.12c477d1.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqP7CRA9TVsSAnZWagAAI9wP/2fqXSybf4L0jfp8QkC6\n4yn+liyTdD4IEfTGkN/8RJUO+YBFJJH0Jwh/FVi2MqAGGNTdnqNqpZo7/zhk\n6+ceRaLKF0pWHfPyKSkDBtNQmJ9miG5mceTYfEz64ieU1/6EGdFCUsb4TA2c\n1/RrgVl4w4JeDcjHUbJe1+k6f04Wdbf9icUTnL/7khURDlVbHvshN1Uh/F4m\nsJkpunabrZx88d6CFACSVn2jYwqulVR3stQP/9YIrzDK0Hg+axfhtTBTLjMS\nh55J2rbdof3DxfWuKFUo38U91EFbjrnY4vkFGUTgDmVOO4a+bL8tPAFTnSHX\nbsH0+VqPSZcNMGFkANoQoC3gZAttscFfIX/Vmcc3vAj5tpulV5Angcy4Vt9g\n0kwO9vhBb34fEjaIdUPEzO30NCV4ZpipWhwwefRIZ96XrBub8L9B4HgUN9Y0\nxU9p6KpnN0PQBL+O7OL3955HR9rgzPQrLxZe7SsRVFosAPIxAvSo+Eqx8450\n43iFVPngzc3whXWB8VrDshCGwutFq+GDCcj31RKHLn6UU9X0k7Ts8+VKgKsx\nwcdLJRcFpXL6OUPpO0XOEzchTYP+JEBtRx23EpcgrRCIKmbXWA/EZ2H6G9PS\nQqVWj+UCHBFfwvqXicfkUwdhc6dvjqbolhNq/jGiLGjd0rgU+YZYP6lFqB7s\n50mm\r\n=D4rg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRvcNu5GUNtv6pSjOaSDQdsUETnQytqXARgTbL5W187gIhAO1qUJ0MtFZzC3jEMLhW1c6mUglKRAYzfZeiirjsY4oR"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.12c477d1.0_1615242234450_0.9265988954329205"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.4c38f801.0","@material/top-app-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-TdJFJJ7SOZQ1I5bU7QPP5hhRaVmJZwP9VQU07vsndJsgur3Gi8BsN2B6SQsFa5+YOu9gqqw/6OpvY2cxbI0RWA==","shasum":"ef7de18184d5ccbb85f6341bfb7e2ae0fc53ec34","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.4c38f801.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrJNCRA9TVsSAnZWagAAg/8P/1f4bucB7TZ8x0xtnIPU\n+H+8Ne7J//CYTKs1po5sslmTQdOa3ACZVu3wyBXRoN2wYqwnmRSo0I5zfqaD\nWRABR1lHH1GEjKvFrQWjyLyE8J3kUorp73u7q/iW1KpbQVtPZoM4Y5LRpkVe\nntBMsgg3OSIn9JXxS99qactgOB+gNm3yGF2K/OiJIHRvqIEaDuipgQIG3WkF\nXnYcW76/igJkWYdSwGTVxIMGE/g1o0I573F4qp0szpVw1YyZZYbiRvs+kq6p\nZz0pbWjSqMfBdYKwHGNC3NP9UNn443IlCFqCTMUmYSO/ODRy7TCchEyRq9w8\nt3f78/8QWdVlNRlyxxBHuT/AhgPWRTgROmUPdggMMWnL4VxgtjSTvMmtPc3L\nyEU7tXL6Hf1OdolQ7/uuFD2GM63XMl6DgyEulcVvA3dUBoweBsnl60XSZ/qG\noclajB0j7T2d2KQnh1wZj8RTpi+lmbVz1fD5w3kw3HL+RL4Bvf3r1GF2Cvwh\noRMqRPaJYGdHKxhvuNQa7/gOfmw6ee/ZByyBNCRiSPUAKSCjigEXx2xFSL5A\nSpHPG3vP9aLwZP01Qhqiu41LMjfuW9rPulhG9rhFONkREBkTbg/yxpjbHvEj\nMLHKgLPkgpCCWpzafGibjEcWxDkH8wWtR7xKOzGH0cNae5x+B2vJxSpqkW8f\nGao4\r\n=6aQM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyiG6G1LBEUtgGOU6O6WZ7ZNNnABMFKtOaVjgHn2EuHwIhAKwsWQybzkByGTdX6THCIc/fL5PdK9gm8jQA3pD3NZ5s"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.4c38f801.0_1615245901082_0.5838111714042937"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.8795b83f.0","@material/top-app-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-V+dWtc9TPIX0W2WS6m8b00HjoqnLi0aArVmZR/Ngbs+g3QMMzwxQBod/R8YMbuVoZac5QBxF0gHP3i4/IIxhGA==","shasum":"8d06b3319c9d50a5db6fc8b8885a86201f267aa0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.8795b83f.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR74mCRA9TVsSAnZWagAA0H4P/14dky8fggYBNTL0JV8P\nyJdPVGzJo43WBtSR2AHLbL5SOphl6KVJ+f8g6lCcULcndTMdBkwK/xKDb+5A\nJBo+I4uo96B4yhQf+9lkjDcHZ6povUHg0k/zr2HoOB8KFAhrhQBr11neWRxh\n3BOOPU34JS1UxBH72Zzf1CUJpifdyYvwwarUCiAfxXEIP7do4au0I5fD/5qz\nSDKxdXLn77fq5lFT+IyXYclL5RE9vfWCGoo8OtqD5uokgUs/0ynI2Yj1GEP+\n8xmTPGZmCOhH8314aj/b4iIx0ZDlofGmb34pyUK1hW1vFBST26yRXsGHt+WN\nAPV13aPWgCRqvbyF1888ug1JhqWWOhjZcSzucNPTF0JvcFCY8bSu3QIxXjT7\nAPWg/u2ZVOR5A0k1lThBjBxssNoQOBmjeDXQKw1aWiq/OhCyLl9AjdJknCNn\nKbmgQBPWtKyTLbYCUNBJaWQJkLL9qPkCXAxY0Ov/Pv78lu+ZFwjSr+9wbA0P\nS6Jyu3VooIxHOA1wnw6Syidk+Wh31xFG9vRVduCDsR+fKt9lunNVBK5ZqRjg\nXKlonztF0X6ayzRGilKt6bCOHHe6WrU9NG42QDFQwhuImTG3J0mnjawrsBvS\ninwkURYMif9WQ6/AdQkMKZf7KLPnhKD1aLnb0SlvSovdkQfgM8Ax0kWM4icj\nbXWl\r\n=0puF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIESW1ge6BI5w9UbEVBOkHFGQhEYiUQdpasy81qy55GEpAiEAhQxWVa04pDMf1VOojazKOPykkZWvvb8zH956eOsmBaM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.8795b83f.0_1615314470039_0.30925505878327164"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.12b84cb7.0","@material/top-app-bar":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-VRumWCH0u7UaOXXZQMGAGGWI3Qgt6OO0nfV7VU2fAYudQ3+SbfI499fbqsD7rgj2xVZbWhF35cC2bonemLnkuA==","shasum":"8ce1dad08c6b31cf44dabf8b75fd02fbcd5573ab","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.12b84cb7.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBW9CRA9TVsSAnZWagAAlrwP/RiBJ3UtG4fSfbnmuPmV\nAsSBbs9oYeL/wO0Daw/K01jbG915DuA/f0ee5JS0k2VjbaIz1f6CPtEG3LSm\nqwpGXDKK0o250UoO8sQd6JfNxn8PbNDBHWMg1eJLVVVMkHUXyhQADjaN00ZC\nkhreygonW4kKdqgPRYCfqS15EcAeQVjuqVYzld2yaHdWNosSpQMK3ZPULbH/\nQFXME3mG2jmhOguNalkEdsQUkjM45bGVN1rtNgWBl2NvbxxvXJS1yvwgJ8N8\nF4mAc7/8RObGB95WBq+pRA/X8kybSgLr6RMoIp4inWb76hL0sp3yjzejKleX\nGam8OUcr7isdJO5NYkfkmEqg5hM/XBs67f60R8nBWCJHhcwUbjetS7BOoED1\nsvo+LoRB9nX+y2hJij5fCVTPjS3xxg4WM+9QRx2Gp/MZP60+rJH31S2Yst9q\njrKHbv5dFaNsAXI+sk0y1o/NelhPAxBuuBTGqzfakmPXRHXq5hiXFTdyWF03\nTxuCoOFYwDn9fHjkzMEo2b7kPxDKAUKM5AdDXFsMGr6X9RTdtVlTWDvRjX6T\nXrBPvc1AqXM9A6vg+XiIniXzfTqi10Vi74iuqRRbZLR9WdhHdV949Sa7g4cQ\ngLc2x4c0zjfC/iR6bMQ7DBev1jL+bGTNodgKrefZ6w5SoVUp8ZqmA3XuyeQU\nGLDh\r\n=+Xy4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvLbz+QJ3dfxwk9d9OHbUhz/mQYTOGYV0jNBkaO5QUkwIhAKp+1gyV85B5koWflH+7RERExHl1cvXMXD5mjJ2KxtiG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.12b84cb7.0_1615336892694_0.5281733692224244"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.6ac6784b.0","@material/top-app-bar":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ZFV+Vjk+rxyZRLM/+eJd8UXe3ovv91N3VpuY7x4JhURWD+FCYfTPUChbDfIj+8NgATTn1ZLtBf9Rfl0D5UaU6A==","shasum":"53dd0058b3a202f360183f208aad57aadbbeeb15","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.6ac6784b.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBgrCRA9TVsSAnZWagAAegQP+wae+RfZTYczuBJbKfQX\nMk4TszCrlw+16eh250lL2yRpFqhNIieOPam7jxnkRCp1ht4IvNw74VXNzTLu\nkAXmX3Swsp+q1ONNkAeGO8qopOVg6ASivKZvLUTXAoWVykc0qljHCIW+A9ZL\ndzJVDIkWKmhlxiqpeyYoha6xX05w56sqf7SclZKjEiJaZKnNB0kfxQzZhAE1\n9bItDJOEcciU9C96LffrMd2fISvR2JzRkRzCHZtShQRCEQkcYhWgk+qB9gAh\nvaZMXDMbogY5k8ycWcwN77iYtkJ6MYpojFAvTmj6uzIT/NDmLg/4ePW3o59A\n2N9vkb8PFXfJr0LWIn8ojN4CYzh/b3XvVpWYP9cno+3sgd9zd8ZpnfHu3vQa\nbqjY8K86mF00vF7lhuWJQbE/3slpIUAVmGZgzccO/+OgaNZ/7othqHZvpMOA\n5GJxaVOUojrFSVSaxM+pMQi3bcFAZDmKkOnZ9ViiZ3AoQli7miL7L7gp/mo4\no4e1KPToVF+STFuh0OdGvAxUHHxjLgmZ96bXlNCE8QHcFaLhOjmz8Wa9O8o2\n2jNEb6s/lDgkwHb/KZpqjtyKTicFbSaSyHHdzlK3336WBF+OwbCn8SIZdkiQ\nrpajnqvkK+lNIAaS6lOkXiJP0koqpITw5ut/ScQ+4Zl2DxeoSZgC8rbXxeVg\ndroY\r\n=4A3/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGQGeN9nbN887qMnRmGxyscGSQeUlIjPywUmw+GvSaebAiB66oKn/FdqZfBKJkAD0cLu03hGJhcXUlmhz6J+JM1MKg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.6ac6784b.0_1615337514724_0.6232430165977196"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.b6d92934.0","@material/top-app-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-XVH2eUIGLQNrgmi5bI1a2+kytrR1ARTuKwKFEg061P/fF2yUNeX0nl4ZhC8he5Ql5zDrIFX/JBM6BohNAws1Ww==","shasum":"d781c66d5bce85bc9ba49e52e4bed5f6bfb3593a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.b6d92934.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUGuCRA9TVsSAnZWagAAzukP/iOUjDx1AHMLZR4YFHGy\nGRTX3NXS61T4m+IqI6wi6xdjBn4JjKu6RP+Ln6kO/rCv26g8gvmeH82x+FD8\n7Tsaj60TLxIpytzoxWD4nsXNrwOkWkCeMcoGwtVgSUPMWQp15bmZHJ+CJpXH\nEZDLYe4xl9FCP0Sofwq0B/qUk+sPu1IStHrtIsPJtPguljaIL6WUl0JFkq4O\nrslJJpARB02Rz9kHASi4w39ZUmHdQyOgQM7zc5fBJ0ZR2LAbvsOtgQwTJwDN\noOwmSDkdeoz/d/hEHZqVkBKoQL1/eAPpT56QDw91tas/pyfLcWNtiCNCjzSF\nO7AaNnA0JjzO4ZxXMucMwxYBnKCmgTMW6U1W9ESdx3EgQ9CzNxC4cW9oxt5D\nzn5TRE85WMioeSYIPRm7NytikP8N3aW7b9AC2CkanIeioyiGhAKp3YrF9zGU\nIH4m20g//yUYAzBZ1mYC4gjuyT1h8klXZ+ha7XaZkMsgo6M5bLqIpnilZvkq\n7moVrys5V3wRNQJfpZYtCSfw1+g6ZueKqlwnHwlvTDmltVX6510flTaY4xYj\nMut8PcBql1KmOq4kXXFvmKXIsM4gyYXYZ4vvLsiC9QTZygkpWJ/XtEqVyY3f\nnh1Juh0txBmEQgcj6StEvpGFH1uh7KlmMWckfuoTUe/+LvdUq3ceQ5Mruf0Q\n86Pi\r\n=kECS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAhiiNT5Hfh6S/CQo2vtVL28YB7fF3nXbHT4qDjfZSsFAiEA8ThoeeK3/ucZa8LRjeNKEBVB9m+VpHyabrBczjvJYac="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.b6d92934.0_1615413678286_0.755171072401662"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.99a55b9e.0","@material/top-app-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-epOw3iMPyalBP0wgCGxK//kc+xarxpNlavJpK1X+yqeEeax6Y+KLWn0iHFzagqKEdbnIZcUHt0oZaLVnjKl3pQ==","shasum":"12f45b2332d68f41e4859283bfea73156afd0571","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.99a55b9e.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU2UCRA9TVsSAnZWagAAZxAQAIZkDBioPBfjFZwPhyPv\nygK9Ihjnwz+t7JXoFMU671v9F/S/9ifB/y/hLC0EciiEY46da0UnsHdcQuFv\n89a/RYxy9un+KQlCKPIKtz60UmmHCt1Mb1uvd9YhfsqkzO6KwK1HAIdxehNO\nkDoL1nn4Cqv4GaD6q/urLudNw8p61AnZoYo/40R2/LkayEVYFB4gy0tIlLaT\nC7O4pgvEfH1TV/QNobQh52ezPgg8jEFyIbQwC9OtyJmdetRklL36/qzDswOQ\n0Zk+6+anxIzCphpO6Qn5EqQzSfsQGbabf9TN7Uj5mMwhv2UFFZ5pKOebpVUX\nMDGx1cNHQcQrjzWqBAC7agvF3ZxDZFW5EwMstsKKhLnBPP/vSaxMs828F1BU\nEFcrhwME+5Ul8H+Juv1L/dI0JtwtfEHyBDEev2JSTg8fi++1mGsrjUj1t+Fw\nwd0NAnHJbI8Wj1+RhGBQeAUjYGQd+NXQHf1S1XD919XjgH3Zb6ToBriNH+Ug\nnoWCoThEqxSt2oX8/aJZC8rNoZZL+vBEgF8bhqpr/SkrQiItIwmWeXfeKVNq\n34lvY1lizor/93aC7Y3c3M0+zo5PWd5z8CbOWUoe7TD4nmRk7Nasvr5zYIUI\nwwHv6PkoxUQfZjvL9Sr8+yABGza6+e5n8hje/TNKd1AoYl321SLIaGkevBv9\nrAMK\r\n=c8xt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBW0rNOvg3yITt86VhyY5XMxWYAtGxkmMy+E3X94IO3wAiEAq1T0wJlNRWLcW4ZEejn+q52wj54AYLg3d1bkhDO1rDM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.99a55b9e.0_1615416724478_0.03446005889924075"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.bb14efb7.0","@material/top-app-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LUXJH3PGPnkhQG04gN9Sir31+QGuAG0PNL62ru1dMKZjImYukx4PoHYRBIcxdPrMsgtYJQ7Fyl57+qURgw4K5A==","shasum":"5dcd8e425be68317cc199cfe09969378d7a9bc80","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.bb14efb7.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVhCCRA9TVsSAnZWagAArB0QAJfWx8XYN2svVbnLO3Oc\nbeYkVopnrXAA5zlWEexX2JAynagPgNPppA9jDK7//li6NbfJH492djwGCxgd\n7nFP9Z66L+a7ZfjpET9AUJE8sHsOQ7FHT12AM3LTtN4E6R5OnzeG2b2wJbVk\nXtXvNGUJSrQnelAVxd6WVUQUuWioXBUACzDA6mc0iwDqDZ7x72FcmufZHF6N\nwmLa0uNzuG7MxUsyF0LfbNcYlTVYfI6YA5SBQIxqdmStuBiQZKg5MjaC/xBI\nMUdImGYbPwKIyaSOy5RC/Jlb2QeJhydr6DK0SMedBrBknejfIYsepfTyDubr\n7EwZUCyCXcAnFq/4exEwo1WPa5KvLAyoVtzPmhan/gQ7+yeZnytcD22Z3Buu\nN/FzXk16cx1MJfxyEZVYWbbGSspkJYCoiDE+COUCd7b5VRe2aFHFX/o4Z5uL\nVKupeouHGW2V1hdLpRR66oZnseQWFG8qMn+ehkHF9yPNe3FbetwP6131q4t+\n8MqqHZiBtoyoRHOJQqaW2W/LCD3vNELFvz3Xo8CM1AKLSIiZZ2gW+flv/Mv6\nnYOlPqDy7TqfpEh5+4JBe2csGgVEWCn19eDI+eUEcN8KCs/bmjmLoBCH6nRi\n/yp/kkEhhNB1fW0TlcLB0uY34UWDZVJspZ5HAZGtMd3Smu/+LBY8lBP2rfjM\navzw\r\n=eLlT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfGA322gv7hy5Xnex5uRFkE/MZoX8fqIaTXUbO81mcvwIhAJZQ7kYE3riRV/587meTQpdfy8JoZpHjfax51Ks4YD9x"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.bb14efb7.0_1615419458364_0.27624225436662164"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.9ecf3bdd.0","@material/top-app-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-VRaoys95SU5vPEVWTTrskCUT4DYPHvktBm1CHGM4GSrpwN8c8ZmtrmPB5z0IiZUb7xA8267Bc8NyuhdEEYTUxg==","shasum":"0c18e1450ea3ab6e22121a292a1f6601e17a4471","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWMkCRA9TVsSAnZWagAAkTsQAIWIZ2ZCBjNU8JbAiswz\niSLbIaD4YLyIoCp+F6gOAEBnH8NMtJLMymyUlhXSw1c/ax0QIfvV6lIcjT9F\neJBZ+6J1MEBTzj96Bze4xCVQxx3ETNbGCNcRrbpPF+iSX6wX3XN+hdn2pd8L\n3x97sipQhG22gtdcWqn8jeeOS2L1RkZ9oyku7aYA+RpzUl38Xm3O9/VG412W\nqwI0WEbUF1uKvk6HtSrSM+usJP0VCW8ZimmAKU77BiQLJ0Zx0l6yrg4TDZqq\nwxzSaRSTusiYv9anbWHrUYrhJiZLpX08o1gixjUEfzh4h/JFvy/w5A/MIT0X\nV9XIDcjPTAh9sNjCXwzLnTQrUVVrdDy9s6Iff3HT6uSCP9CA2H94KHHQzvJN\nhQN16c1WiEAZqCtaYhcqkwr3GmH8P8CNa+Qpk49BWR128qQFDLudi2ejVpkc\ngdNwnZ1X/ft+GBhHrd9YIjqEadogMFeGmCds1u1lqgcpR0d2XxLlFVWGHnyR\n71TTgRAkzs3GdSZR0YLWI/oXKdqag0xR+17O2H70ZIqr2ydpmVj4vKe+jvMc\nxFMS44sE9cgGr7FJ1iC+8A0AMcyFeOzFg9J1fXL5roNnBDYwAkeM0A/hDhIW\nRzo3XvPbhullbGR8F+WVTytn78n2YLOZD9UUrED/SJ862R2BELy9k70fCP5B\n+j8a\r\n=Md96\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVnYtNQuo3Uuo2nDUB/qo5SLkkbGC2XyI39X0MzRgRtwIhAJd9aJcdMc2YEQGXF+hFGoOwZJca4sOs5T+3MvK7ib3g"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.9ecf3bdd.0_1615422244072_0.2253841166892836"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.7c0e02fd.0","@material/top-app-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-4lpx6aGXpDH7JZXZUOMT/cJfkjzzGVvml3PhyKbhtWXmJEiP767CnASDVKSbNYI0otQnifBjuBUxFveAtbgd+w==","shasum":"46f4682f2588f7f0004f1bd3f4b78ac0859b1867","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.7c0e02fd.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXaYCRA9TVsSAnZWagAAsoUP/jehXxQm2dMtmb/CPFb2\nACF0OtOFws6kkFugvsMwuobe19b8Wl27Ffk45+blonvB5bknmw8YiYDNZrFr\nNqsVGq+ULxU/MmbLIiUpOX1W0yfB7kyCHXR4vLsPMH5YCSJayWjKviPq8E5B\nuxygLWb9G0wto6ayOUcZFJpiDMw21pcYvaSrOr/43/brZ3Aq9kDI/KC8x3F9\nTgMeSNibpj/aNr/4OiAod72bc4V6hsuO7xDMBKOKciGFRglFkB2DD7qZrxos\nIdLBWLOL3HhdrmLcQrZU3knTWRznzI5/baHClGy6W4I942g1oymUwlqroXrn\n3SqTwgjH6ZSw30advt3+odQ+qp4W6O4Oqv6CIFYbhagt2vZemyQAtGjbteis\nPnuvaynEJmxbMXl3ZsOImwmmbcCZEEO0+Tu1f/OXvOi40brz2Aff1p4SdgRz\noqYmYE9wEoE2HnnZd8nL0tx6aHLac748kenCiMy7/3/hc+Gwg/8oKdZLAfQK\noG8N3KHL7Z5pa0sY8k+1myZPvkilw5Q73XYGrbAvo6+P6icOIBoaKxwj6OAj\nPqZDKJ9gQ0AtVajINWRYLaxet+iNmiupMmF5xkIevRKMBz6FyUZkoDxHBxqh\nSQq1hZ/6+uo9M9JDfOtpHQUJ/CPEHtFbXUzGU1XEuwGysNwHEuA9+btJZrYU\nr+l5\r\n=p4Ih\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGkOob4cZArIHpqyH9k2kH9Xc8ucfo+fbx50hBK2/LDeAiEAuyl4Slz65MQw1F2izLn3enhURVG6WW3prnPUnO47CoA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.7c0e02fd.0_1615427223603_0.7631932470888183"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.2d6d59cc.0","@material/top-app-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-NHee7JQq5+5Mp9zsFAsz9HggXVgSiR8uKyb608lUXpB2yBPITfV7r3wjdqm0AaQuezy7c3N6uqR2S0IPrFXw+Q==","shasum":"728f50c0be148f11d23291507ab9efdbef271008","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.2d6d59cc.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmGeCRA9TVsSAnZWagAAuxQP+QFGFkufB7NPkZNW2+++\nNo7v2oUH0VGEIZHuhPHLje+QJXpyFpLtnv1+/zApE4twdhcytsJMAX5jHq9+\n0etB2XCJekw/HFI1hZ1JBmpc3WjXoi/QuBQeqN8YiUH8OMAbtOm6HIrf5jWw\naECKmNIjGxa33I3eUtav//aXRrUHnqgJ+zmvU6VSe/t+FQh0KUG1foHO0FY6\nPyZRy/sc05ux1HeKXWYGgKeigRo1lYAQhwbnTbePsIUu5WrOzflBubWfBJ59\nvVb3EzDl4N7iWY6hbrB1A4CWeNbj3gfWWwCB4QEWKOcwboFqB/LSbKO/q3jF\nqAlmqUaP4OUUbnWBiIKZDNHpdlb6Q9g6Gm1WZeaglmEF2SxLJ6LV90oZeCDI\nE7z9aYOmEUtgcj17B9I661DSh9APeOojIIfSyD73rTudjF2NmBUY9eJBJfsS\nHUoZZvtoPrd4wsVaHeD5PJ6351EMqEDHK8MyGaj9bqrGHiuPeUi6CUqgR+LY\n/Spv0AbklzgSo6yNx33sPUN0i1lT39N1/25i34RsnBjG04YFUuLMz9mmxVgq\nfnDQ5wsPNHhLxKTrDR9sn4YTR7pgq2gIVT5aRWviT2cWqcj/1nl2kgCp0Q3j\ny8w6fQgaTvupSZVcVFHeol0emqL8AX9gTIRhXiof9RtqyE5vbHofwr+6c/0B\n0h+C\r\n=rM+y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDKKQTBM57bpVsmAwX4dpm9yuTOyyOATZBLsKtUe5IrUQIgIYvthws5HV9gFefN58b/y7sNyuohUJIpQ5DL+6LmJg4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.2d6d59cc.0_1615487390118_0.3987566853323463"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.0138863c.0","@material/top-app-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-SHBVrfQW0AyxvFPIQ+nInhyXtkUMpLpKjErkhGWnTB3pu0TZ6ERtamDwmHEi+JEKAKMbCBFXaHvM3SIamABqPQ==","shasum":"624d631dd7ca5627fd6440e7698da57a60199abd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.0138863c.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmNbCRA9TVsSAnZWagAA+fkP/2Nn4wIhjMUz5Ntj+RFS\nOnu6Cc7zLDGWoHR9+59MIEhXlj8f47EmjcoUj4Pyjy2zJOgj/hK0UVpshRJV\n0RuZQP8KCOZHsu+kImT1oEELZkn7el45sNtvZD6nIzPztWgXBX+KH90oxTU8\n5CtVDpSuTuGvFTrMQbDjSD+Ct/k9gxkGJZyXX0M5SKtpU3OquxAdpPnqE8DR\nmCE6757a1aOQoOeN9ToKWMqMhmNRzssVWLg2OrJzwh/7Ctlezbhaf++K7fPs\naT5f3SYMxPc2TErwp7H7Nwzx89z/IlSKPKVGYnelNl+wcxv6AAMbv2YmP6YU\njE1dA3Q1ahxZcV+OGg+Wvz2s5dbhOpK7ouXIqfKJ4su6jJuvGXONPaXjk57z\nsjACG8W5TuPXjt/qMocaVBmVHeg57rNnuRxp3yOzUWobc9B6sgxZkdcviL7F\nPX5dukbxwXbS+HZwDqnA5RiKJa5YWsWp+mneFjJ7zNRYS7Hl9hXbO4KX/fU6\nFFqRcMb7qYvFN+qIZUg5S29LqLEzUSh/DTOTpAu4dqgKsg9naBGwkbuPMtsX\nJrVYj4NShaAVn3WVYaG87xd5OL+KEnddJ38G9tSFqSvQoX20qQM9BnnV9qlc\n2eFEH9ur58ao94OCLZZzL1XnxjZ57P5AB4AxApzuEJvFh6dcxFoTmOOqRgaW\nA11I\r\n=hCYc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDIVybLH7mlq9gz3H0PIUwHAim1CtCh5n3hgcdKtMHzlAiAu2OnwLkcDD9U4zwc/+kFvM92R7vziP0HGob4vHVh+hw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.0138863c.0_1615487834748_0.2587227845268021"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.926f5bad.0","@material/top-app-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7hp5J+kU8Me4ZUllAjhoPzY9rx4xOgi4xhJURlyiSDIsWaxB+qXfGsmMi6yVba46fDCgdm8GOaU3CyLbw64MyA==","shasum":"c446b8f4294d5dacfd1866d6b413b9364d8b044a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.926f5bad.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSns7CRA9TVsSAnZWagAAmmwP/RVVTkFWTTwwNzCIk3pj\nyb2M40JiuHirhiw9YP7uYwjrAJLGtjvLeHopsBVR3/zpM6zGn7bs7d1bX/Xs\n0QFnu0nLd+j9TMzksC0SxSd23aLMKg86LoLEG9V5XuFLKVT3gCHRJ/w+vcua\nO8SFRW3r9VWpHghj0dq2JHQArJb448Ea3Choubq14NcGBQm6wS8FViz+A621\nUBip+MR8y7IDGiWyTlX5hg04fvMh+o8vBhhecaqRfOTwm+RgWn4GirnvWcCq\nBSBEGyiQaAnnjLTencKNP7YtpZCCg05CwUvq/YD6J/bFrYNV2Q4xyTiWwKse\nrKvGykVr/KNUyFf5ZcxnPhG3y/WA9iY9ZoB9Ky65EM19EttkmzYMC1Lirpiw\nlPJsue80NtIiQJvu3aDfpSLiiABYhbxWNergcWfAoompEbi3+zGyRnqObJJl\nMfadX9dMaH11O66Tl2Bc+20uC+ahTJP3xNVELNMTu3uNuUABPi3hZP+OBmot\n8EuLJJo04H8y8aV1y2+F3pUDgrcdtDT0EsASrHmz7Thp7w3pNbe8xQ8y5cYn\nIRcTyFO2ROVtl8AYSd4cSGw5Xc7M9EvXLHyA6t8s62Wp731azOgRvQlXLeqE\nay1ip3Ew6jFFVdmaEZD6XAJaMFRk+0YYk1zQH8dwJMyxwFBwFHXyD6aVnVcT\nResB\r\n=Xmm1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBAPBRcypqk1G4zrXVODWGZGG9426RqLUWafIkJa5NuTAiAQZdwpGl4JqVQZgHIiPPOyEv3wA8U1l4ZJShB63dj4Yw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.926f5bad.0_1615493946949_0.6831915396193922"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.520290a9.0","@material/top-app-bar":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LAGFPJQbjq6WTar08AkMt4qSWzdb+k/q6zB2N4PiaQGgNT8fNvzBQVmXlD+mQAh7K27FVqEwy9oTxQJZe0dyiQ==","shasum":"9a65cb3d8cc32b43ef967f49e73345192bbf50cd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.520290a9.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpmFCRA9TVsSAnZWagAA8NAP/33sm0bu4sSXgNqwGVla\nPR+2RHfVSg9U/zyOpRqd7BYigOA1Y9t0UOtinenGa7kDMBfrDDs/1+wWrUsj\nB2l5hcCZlqGEZaRfHRkbmFF7B6rkSoX1UE2NzkPVRKBZTzjIpPDeueEu+xLc\ngAdO+3/wXfeYaMIebww2rl7x/D7TOyRAQPxXUwQOf4rOqLm5ZdgMmAWRPv9X\nJ+DpNpwYd57HoFmooddriNSPpdCONReuNEoQIaaMEvJHH29ELMYefVkCSRx7\nkMH2G7+/HLBSjYsZdc1tAD8Ol3mI5kq1DeuYf1CcKO03oOaIVJyEZfeJkTsk\nihrIu2QRx/n59CW1kTwI11Etwqi2Q6eaOtdDooVfWJaxPw07POnGIqZqso55\nSrgnsIjL+QDnAW/yTfcUVYOfiCIMmcIJP9cxdgE0Z5vee+dVOFNnj5VuhKsd\nPsCQLM7RCx6ZU0t7xBwxRCM4/ASuryAF7Jj130vubiSGt1g6y0ekCNwMjOFj\nwl5AzGK7YJDU4M0sfezGNkUD3X+mFJAI25djbCMHQe3hXhFagEIWC6fwyiiP\nDkTg/cQ9nob8IQtbmR4hS671He0VK8H6JuA0ymhJTfTDsb6y4VLlngmNo9XD\nMGW29zSIu4fo46K/quQhRylIbw4zw+pHZIRAyVQFcLpuPvihFHRVRI3G3cTN\nXH28\r\n=7OJc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDSWbiY0Vl0Lp7qDfiYY964Oat54WcQgz8d4ee4Yxhj1AiBh7ziEjZ19aHTzdoICa4y+onB1hTpXfzcX3ASmD14msg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.520290a9.0_1615501701350_0.8630301738193098"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.9ec431d1.0","@material/top-app-bar":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-kvULDC5KFBbjOQ7ZcVLfFobfyuGL77pIInWJis6ELaOL9oKAbL7Pkw5WrpYsIdzgh2onDrAgfG+JGAyIg0FGXQ==","shasum":"8d78171fdc804ca25896a2e512f00719e41bd9f7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.9ec431d1.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpqQCRA9TVsSAnZWagAAGc0P/jmwgmbixgwGiZ5MDkEF\nCYJ1E6/I/a2/MToEqjMmW5UNySNrbeDlla5Ilc1ld+gxmZ/Ra3dZqFKB2xnU\n1YI8GPYbWeQVQDM+l/qkTd8rpbMlgBlJXyHlTkkKDhW3tbl+hJyR87UylZIR\n0RpXyOjibpOZwx5hZq5RW33Xzb2N9VLPIWRari4KniyAWTOp2wDT0JYsOxYx\nhhwENWLPwRD9+w8YahoHQaT+enViNMTIem6uDmIFoSzjiRdZXSQsSxSoIVgh\nB/I/Ejs1meNRMSLoN5biJOArx22JFMy03DL6atMYxnPtZGCTW+Z89xIqFPUY\nD4EposApp1lLyk/aBASRDXniLEwToy5rH+1XnrScyvMlCUE+XPIXL065qLnM\n6u5YUkpdDKysqhrNJt4DitH5Kq3FguIJkikCuR9sQ8dADPOYSM6siwEGDL1v\nmFQYD2jbMkp8tim09Bj2hFv2emwocH/fScayb+Y18vgAR5k/IYgVStD0ZAvf\nGWOdz/Adjb/oJ2XPmcRHqQAuYNeGmT7ewdSQqO2SKAmXTlxZ6kuRpJVA03rt\n2XrFa0Rt2a4hUq5Xkz2Apw5/aEmf1g6wbe+6qou+1J5QBL8VThKSYlFLpaT+\nLZ8oBMxlthfE0GhnFMOUyqBbjaHKOCZv2hb1bwLR1D3AAUOfrI1hlFJ41Oqs\nktpD\r\n=0p9i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAXKY57DA5A+J7bm5OngxQk4s22G4whLh5ZQ780k6josAiAiHaUZPnLFnFyyz+pIb2Gv6mOhsUEB02xS2970/H8OzA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.9ec431d1.0_1615501968218_0.2671614675567322"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.4246c082.0","@material/top-app-bar":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ueFHGhI1UfgwNWDRrdehbfmwSoWOyKn7vZq6NImjBPWzefjSHzSd+PlAmJzFmd+eNPQRfY3fkWEQk8+DX63FKA==","shasum":"846e95ac575d27cbc7a9902b992a2553a9d7c75b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.4246c082.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpwwCRA9TVsSAnZWagAAguEP/39gk9l7WJNvags1+mpX\n6XjG5qE0oLnbqcPcpY7cDkbzhIjTpx/oGMAFxTLb+qarzn1b+he7gmwzM+R6\nG83KuIXfYYyVZoDA83qA87HOLQLFup/Vocdt3Z924UC2EvyEv39L2dVu9SqE\nd7RkbiyS6+eZfxSDmeCCezSq0f8jFrlZyBLz+ruLlTar3ISg81AvKryT7Tbq\nwG8WBDUb3uTXu/pxnrOJxe/xqfE/x/pcHNyLDmPotmg1Odp9UYAWqJyRISZV\nnl5hxL5uHJIWFT8EwHp5gHZAfiiHsldfw7l7S4e63qh+iUFyGoBiKUUz3VzI\nSTbAkUNREKwf7vjre7PcjkLUkaR7BSBD3D5peZOBpIGsoJ6Bb9mKVilU9C0R\nt0YDhxNY0BtOrq9m4va3QI/pF2iyJcbJOLMATdd77FbFUm5c4cwPCFrJGcFQ\nSeotVedAhP43ki0gUEsn4kH4FYQEo151ewp3rXu8EfvhNE39RN9yGyivTuCm\nYqQZYmEYSFh4xYnbSbFfaz15LMJiKTrClvYo65TAf+XK2P8ozmZGW1dNuC8u\nWE1vZemKx2KZJEJMgih1Pr34nqaOlKKEvxp1fYvgs4olfpiPaI7QBx6I4JYz\nnIs7IJ8lVfMJvELgASVCTzA/nktuqJH4NgwWaf0XDUcEzXwkgX9oAbos4EVZ\nLrSo\r\n=ine4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG2JAyGGKjR8wjHnG0QomJnwZC/hwK6iQvxjJCtcYy0GAiEAjClwsmVIi9uka9NgFxD9MBkRWAQQqbA6WFHTYymiYiQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.4246c082.0_1615502383734_0.4942571404405902"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.2d736253.0","@material/top-app-bar":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-sIiW8V6/hOVeaE1t22Me8DEjhTxl2O5ITS5U2Wced2K6ebPjW2zNMG2kQGv/etwtMFKTXARzRBqAQFeDsA+63g==","shasum":"974ed629b4cb5f422b6e5e3d1f2fcc1f753bc68c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.2d736253.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+FdCRA9TVsSAnZWagAAIioP/2nBdaMqXvpT3Q+VPohj\naoCuYiPhYoSpp4xXORqshZ5wN3ghDWn/9rOmJ5nzC1EXO2pABWDZdX/cEaWB\nHiOQRESIVWIKiAFwkQ2hWP9UftZS4O1q0c5C81wPKsuliLET0fm/typTUJ2N\nm25Do3tbjk+wqww7AcNOw6Wnm/EYtP4uQsaFopYD4ko0oXStwL2Q5dvcqtOd\nrkOeAWGhYa2150heUTB/F/fJcaZ1i25qrkAqg4/2BNAn5Xx4sBFzofrbLO78\n3EwdTNq0gpd2XixlAxgYIU5wdKD4sJFSbQCno4SGs/mpPst5LWHUgDr7dCAz\nXCq6lrmJ8cGTYz8n/dS9uJSUqZAHKCPOp7/fbW3S35xF9ujE72jxbYNjCG95\nsfrw/Lxip5Fjpo3Al0+6kRrDhGA5SPurMjeXa9C2oijVBFWSc2EftTIhna8K\nj27vGfCC7FndYqThGD8+vgESaC3jY9VXox2hphBHLVznR1lwHHvXYLlBpLSh\nOt3G/PZbp/Vmr6/1fMjF2v+Jo/HmJICwBt3/x+guxWLqqGcOQY3Hc/WG7sjX\njwWolny0w70zeFdXADcQ+F/EYoW2sr7sDnnygrEhglbj3++eGHTE3Xvvfx1Y\nm/riVHk4/pLyaEt/8XQURzZABL11h2Ak2go/j36zCv38TzZKYqYriCu+IB2d\nbKKk\r\n=Cvwk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEhQv7zPBhW/m7U37SQPqP76W8BHFXxlc9FmmDqfSTmyAiEAudQ8XjK7Cdrp58FqC5sJVweTJRbvU/ZbamTeBQ5MpKg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.2d736253.0_1615847773107_0.4734157832725632"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.7033124d.0","@material/top-app-bar":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-zI1Lpl8RfhErTu5Utl1ZHquy9IqEPugGOOsrDA3GmcgpNz7k4XiRjAb1hAOR/qgtLEG9pCp6lDJHcPYj6S4IzA==","shasum":"588bd9f9aff15aac2a8787e294ff0a009d10587c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.7033124d.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPsICRA9TVsSAnZWagAANXwP/j2vQveFFv8FcfdnUlR4\nDc/KDI71Y23+Ek1LGw4f3275hPFsrZJvViJF2LB+fqH5LOMGuMSo3b4ujwei\nQABu0JSw7IH34K0VPaZLyZN6RtuWVye39J+qqIBFmAPYNgtebNRETBJVt76Z\n4McomoQ2/0YSayztObDaXO1ymMhejqWnGaifTrpB64s/rVe+FfrcX2HIzLMN\nfQFcMlYu735Y0oMD09z9qcYlyooBi45to6rcsRsdksCgYM33Kx2mlX0HZeoY\nHIWRS3Lr2DD0r4gtUjIVG1Yrmy0ft4UC5A6qefyeeyPB890mvGq+A/HND8xz\nWunYVFnULsRZcZs2NfyVqkUbpbt97ReykScb9k+qlDCXQZpze2AmscBhj5de\nbSfNLBPuntGf+W/aQiupWp0g0ybdSxXp+Mg0lYU+GCqkDVPexT0LuWLGnwv5\ntoHZ2c/gOSgiQhA0uQZtRiSPuXE++/kXdWO0cbS4UcpVx7KT88uvplF+kz4k\n+abGUeGDrlnHH7C8tEtHBOi2Tn+QI2oHbmkdrqB7FyBx2ThntKsYYu1InkGR\nBtpusxQa3i5bKQFzDAwnC0FqDTuExwlkjGUp6r1jbsJn6h88HEhWtTUKN0kg\nobDFWDypKoxiDeleMRi1ymqMnxxgJj5QafpH5NWdky5v3qKCxjsvseON2NuY\nZsmF\r\n=KKZf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDm5xdvVKJqY8fH602dC/FbO61ZZsXErQhvG/Tv557eywIhAMF9Iss9SZJSYG6GaShmO1sVyGEPv4MLzW8Rf/yWObqy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.7033124d.0_1615919880303_0.5311584957569091"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.6c0ee901.0","@material/top-app-bar":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-RAexuh9+50jNMeRfou4Ayy3yHFk/6iIxg3cPIMKhK7beEPjnXMbpyzww2BVpKh3n34zBYDd3c/8nLLOo3uRhXA==","shasum":"4ca656b174e27c1037499b0ff0ce5857d44998d7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.6c0ee901.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTOfCRA9TVsSAnZWagAAWGAP/jYPLXdDaI8uhOoWt5VX\ngrqpzXII526x2MqmVsUwAHq5JDF31QQzY6NetZucjcQLL+bG322uQMEEXmjy\ndKaAhWxp1um2R/FvlHyNMCjBJyt2zhNTuUiK19SDCMw0MtxlOrOsfKzgqjxb\nK/UadbUJ3RB1hlvWHpz1qgS2brssk5bX+a97kAJ8W9RVBQlgg96Lk/s5vWc3\ng1O+pqNRx3J5YQem+Tl/IVXDIFpFwrhg9EIuNktpw3QVCq2rmHg8KEf7lqJp\nHIB2ftdPqSdJDb3trYwutLVmDHXt5KHx4iWQQ7FAeLO9P7JHJU5wpgLmooyx\niF6wxrKh3niP6G6/j+YdCdjYgnD4b02nfgXDi0MY7Dme+WeSG8S1JN7ndrFf\nqJF/yUH0KCzOBXuLJEXBBXcgeCEsFVS6w08JRj04le2ezT1ndha0pLekyBes\nwUw8fxTP1E9w8ECfDubBV0HzgHDfZZ+MBjdA+ko24xuAyXbqcfKJsuHpOVcb\n4zTPRwIhbvmojfB3UppbyZ8Srzk+NS7GHyR+OHCim8ztXsaupl3GisV0qNpb\nD8yOc/XCSzLbDN2ZmBUCq1nCuEy05dKYE6QXcuQWp2c6fwn5Llfb+fhM4PkJ\nrhB3VTSFD7jIW5juCtmo7y75AWARviAZ3g7n8APU+y1W4ARSqfBEPh4jWiPO\nqwec\r\n=bI7L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC5nmO5v1pF/cvstJjOr4yXoKx6l7wxlMY9JSTLHBfIAAiBJaXxGLQoIJ2rtWK60od2h3WDMZj6tkFfedhVCO2qwMw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.6c0ee901.0_1615934367147_0.5071160046967806"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.7f0d605e.0","@material/top-app-bar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-kNuikbgX0AUhX2xVnPVjBeNhxflfYf0RLE7uuiHmtR7NUvrAnkZvIt5rFkRLJxAI5V/3VqqCdbo1NGnDpLOpZw==","shasum":"e59f1a5c6738d7f12030e44aba44e8ee3a56efed","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.7f0d605e.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkTUCRA9TVsSAnZWagAAxc8P/1OiXZuTyh8NUpMjmfnb\nOaMJOBaNb5Pjdt2UVBD4jpVUV/MW6Nmb4wVVk1b3sYtBf90u56jAwW/r3ZgV\ndw4qGxDKxe7c9hngwWFhdjZJnVMha390jqAkRp2mBL03n3tNJLqA6TL/Zefi\nm/TtP+6FRMoUz9pTAA65SkfwD2UriR1mHxyEsl7NBcCIk4uRyobvYiilfWqy\nSykjk36RTZZ+LHVJYbSFM1nMnLlBPlpdfyNokbyJ+GdKmCNyB3VejNAQv6Df\nAIiC4oMZpuIajEp3nb2xC3bySSkslDm9qE7uVBQWrzXf05Ld833LNqODcPSp\n5rlnSuqTJy0pyM/FJJWJvnA7+9lADjz29T25aJMoEB417tkNQ4p2q+q/nEyP\n7jU5x5sQ9XXRTcghaRsfMFp6wuTDxBXrsxmXACERSIgwMp3dz8K0Fza89pGA\no9qDmw5HRtidAwjhWAw3Ej6Fq8q2kl1SKOFqj7YXDcYT6VqBbjKZLviVYEPN\nGh9AL/Cuhdkbt8FkoIBQFqon6Ua++Xq6fPLtgfzYC07RhqpizcqsPEBajECx\nKU+lc2s93S2K2rTjD7/nSBC3lmOmy7EQ96U76sv1JuDZXBdvJZQotxtmTw46\nBcyfItafpsTwBMg5718TEOm5Wd1Y3h2OKR77fv9QsOhqi3KhWG0zLqOYMnnb\nKqiD\r\n=h9Ka\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZkARHPnRdOpDHeAB1q56gCjBI6ynA5t069LUKBVuS4QIgLLhqvdAa/1OuvbYAN1NS2pJuv610bd9KD1MFOgalMDQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.7f0d605e.0_1616004308361_0.5697862202595914"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.572107b5.0","@material/top-app-bar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-BlbYEw44DmF63AEBoNoWIvOTm4MbsRfQDFgkOoishHHePOUdo4g1JAtkkt9EgmBcI0LW4N7TFLarzE/1q3FE9A==","shasum":"d1139320bcff9c6e07f0d5214068cbe21cdcadd5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.572107b5.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+hBCRA9TVsSAnZWagAAVp8P/A8y/4rrqL7mg5oyM4sK\noNlgqjJ2aaDYyaC9otDEnlox9SmjF7hRz4s1kLHacbuFThDRkXKaXtd94KoI\n9urZte/JqCg2GYmf2bOQVtKl7E69hrp7lZJ10K/tzVxA9NU2gP+mxZZbWheJ\nXP7J+RkC4xk0ldiQIaZuB1fN8sTpW6fm39zrqee/5fu6R8RTAgFbvkfoZCRD\nufFwaTT8bmnH7hr/GPv6JaOAKzNIA5hjpNXb+dixtLPSbbUQmDnCvef5n1hw\nzrLm8hVw8YZsqwL3/Qbh05xyPSUrWZsQ8U/dZaKuYNPabgA2WzXQ6u6K12wF\naTASZ6gvbMFELybquPT6hS9asporPr/938Jgeso6ns/V9PZNV7L1nkMGV49k\nEcxxYQLm3Oj+RSkgfnviBMsLAaGp57w41JAiMTqW0WSnQHOKRZn+h5eOO587\n4MZncbvtRl8Eur/TrivYWYzaGExOpkCCCXZUH/fv2jQ4OiA7zAyZttp+GX/m\nBqhr+ArbYudOfpFIv78y6s2jFA13bQMM272Jht4MQCTg0OO8mqIvmkta3crX\niqbvBTr1J34OQfYB8uhF0zDiNk0/A1J7cWlqS0i4HuL5cp6Pj0rfCTemsRgF\nbjZ16csrMWdTqhChbwtQ5jF3rB4GjEOqOVyPrtSeZXBZY6EuiA7PNPx2wgXk\nFd3u\r\n=cOiX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICtWF+gZY6sM8+Ok5uOgbvHNUtQhkYaMJPLHXxjHFuNEAiBkFnDtNc3d02Qpme4xjpKRU9GaA2WSWV4eWOJPLmfjHA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.572107b5.0_1616111680801_0.8678003219855326"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.b7b220b1.0","@material/top-app-bar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-R1tOFGUwcFUO07cEBOx5qV+cLd/FfwYjw1bIDcnD3JC5hDyAkrMIkdyJ/NZFi81dxPzRiPZoxZhCn9MXq+iAPQ==","shasum":"9868413829ca356c07187c01ca157acb8a9363bd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.b7b220b1.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+5LCRA9TVsSAnZWagAAhTcP/3gV2HYuEQZNgFqW9T5S\n2/xtfypaV4Bz+JTg8FpeWYm3ZMw6ovVs3QgJ0U8ZaggzvMnarCZg2D75BpJb\ncZO2UMqgEJP43sG4niyeUFPgJ0FmR3dV8L9WTOljtk6A6kqk7wGD5zfIJvi1\nHwdQYxhAHXIYLZlu4PmNsVLKRyvRZF5XqwlKr/tpoa+yFBraUB3+StUWweQH\n/2hNp1DukPmHDaeIy9aanSWGfoJFWmMbFzgdUuGc3kMOYWRH9TAhwAi6Sxlz\na/6XPGPyp8uE7amNjVIUsP0iaWMm4573d/G7UNptySouuzSzlTdVOGBM5sP9\nKw5rqkJ6Jae1Kqt0xwbU1NXJGv2wduOcGhpm05ETbOSLuKrWdlPJj8eoeEZl\nYpi/y083FxyAbQnaPQIFTqSVN0yrn1GWqj/EQ2WiLnzlNBNtoylsU/DBL8+D\nX2SKKWYZrlGPbCv/Qww8hs1GMyZ4Q8pwv0lJVJ4nfJ/g0b6uK6JyY//ddu2n\n6acJEDjSEZ0+dObEwd60xMkd/A3zk2s5IN7mbSrMdkk7F4h0Myycq7YvBFXD\nOsKAnMP2LUdzbTS8kMoyJp/Dr7DQdbdXXqB13Si2Wakq5RArquCJ12pgE9Nb\nd6BtfeeN42KOaQklDkJos8w3MxCTAJ3c+8JYH5Q0lJfNvzdMeVrwvwFMpWli\n4PXv\r\n=YuCu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAgtUCUPlrhHxvINHHfLZ6s4IvzmT/ojJYpk+SEbj+BrAiBAmG2Kx/zVEpT86YdkC9alRf9Yl62BGtLyi3KosWXzig=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.b7b220b1.0_1616113226888_0.11470020645968426"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.233b2de7.0","@material/top-app-bar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-QNGrzGM74W9sBi5cxtUAHrTTMkhzub0FQBMwE+Uz0DsTQCAoh2yAryudleSGya6JimNoqXnm5+a1fPFk/32Tgw==","shasum":"0726a2c6a96b205dc282e5ff2bf33b2bc21a90ca","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.233b2de7.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO29CRA9TVsSAnZWagAADyUP/1rDGKA7fG+9eCIy+7r5\nUbhqk148xciN4n4iWYokU0W4fr4agm4emhM+f0SeuLmawwqiKTD23AlxYk34\nrmoFZsEqE1rT8/mmibRY1IQASmGTbl/TUkraB5FXBllbwsNiDUqmTfZ9ZSSs\nffRMO6wLz3cuWpaTm3Gr9KCjchtq0mzGGFRYjfTPzkEuGEWmXn7AG5Zv6uY1\nbZDAZZnXSVCOAjigr1/wyOlvGmLaf0GtflDeskmGyLsVZ5xZcBI09bm4OKPl\ndDXjG7uHReW8y/V3yY9MgHuQ0JcUFVBjAdTN9FTc4a8UW5iqBuvdioGW+3Oj\neN5IkXTai8xLgoMlRFftl4Ocn4ZwMjmMeFvoE5gTRjx6IBBAWeon12za/CzM\nkAVWMawgycGSyXiL+hx597Rbu3Qx0u7MKkNtL03PnqTWgQpuY0M538pp+2JA\nRulY5Ltxonf2IC1TdQt7i/vsMZjJ9rMkNWSpG0rMVowQWcnb6lLJjwagsUue\nnPHJ8Rku99eNlGJzxpWF+7iT0n1qKqF2lu2+AAViMjr8TY9aZjigHJG9Qdfo\nM6Zgxb9pSAxDiot/dSZldPNdsK75Z1n4xekxwQv32aQ2Ovn/ScaOXBuKy5wY\nEr19bW+dzxT5/J9u0BCAcW8rnorF1ARNalFIhvlYATeDUynvZ+4mbPtF2oGo\nzYTi\r\n=540Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBTb38QhX76J3S7vgm+Y/hS7Bmu6LNolC8UhYkEV9za6AiEAtJMxcusM3XLLWzxAULnFfi3/7lpdrk04Ar7qW/6RZ4c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.233b2de7.0_1616178621029_0.3974513448871253"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.0c1a2d97.0","@material/top-app-bar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-tEfQ6WSa5JwiKmGJNOWady8Ju2HXTI3+/5hBwugs8wvi6SUgpJhX9SCv37docwIfLRw47tIH32TdhUC1PNYkBw==","shasum":"759b01c8108d52ba4906a78921af0af1d5d45d00","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.0c1a2d97.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRXmCRA9TVsSAnZWagAAHVkP/RghDnfq01gVOcADVngO\nZHMKTfB7vqkd/MHxRjYe34BXUywFlrA+xtMiyNpoZdo3RzCG6JkYlan/xI9z\nB1HDtnAwU3HlISd2By5MS533H5gbA9TcL1w+FuDuRUMUErGRIyit8g+Ov59C\noD7LUIhWXsh0KWxQmAVfqjBuW+3tK5T9GKIZevUQmix33IpaDqV/mChkkBmN\nzGq/LTfUbkZ1GfhumsvkwnWmTRNNWPImk8EkBMc2uvz4YKMUFN7qMEjQn77f\nJtzdPaqbTfEHjjXNzPORX1r8iMrzzbUa1S4l/D427QWjTo+bIM6voT+M9FRC\nqRKvE9K5Cl6Y3PYeVzrXwcxynq+QWjvFIRs5TtwKXUwRva+UoCo3QsoKgOIP\nYejNpA69yz2hG1C3GlbdPZFTYcp/6Gd5G8q46OHLXlpdz9A/By5TXg2uRme5\nkektFPXwHfseUkgy5Mh3YnDfYBYFZbcCSiUA1raWeSAYKTSuKqw17aJFvWzM\nhv1HL4oSVJcvJ3aESVKimSM4spewdcm7PbFuSRTc29z2vMRhon//9M96aBAj\nbCm01KNDHKFOlEEqpdMXIbqVl1CXvuv+j4QDEw3LLhRR1JaxFEtK8ROPbcPi\nBkyH/ohcFEIuHA0X50dH8xpVW4IpzGeUPspmJtKhfZ/0cvJaprq+bmyiZnaj\naGAC\r\n=K9fh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrCfJiJI66uiie4XtDhZaI+xXAKpvxMCd9MWwjrgmXgAIhAJcuar4QPM67N36g1hA3ZzDxXr1kodknZRcwR1HUUwfE"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.0c1a2d97.0_1616188901875_0.8370158319141763"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.57ca2e73.0","@material/top-app-bar":"=11.0.0-canary.5f0fc444a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-6IKHAo9FaRZhkzl/Ez4J2bzb4WxO9ewiddvBmdmiK5JC3pKiwPS/+3luIl4fL2MyERvtpzY7YNmZgUX8grconw==","shasum":"6a3eb398b1582c2a6da763575ca7765136b06446","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.57ca2e73.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVSiMCRA9TVsSAnZWagAAEioQAJgP/bWYq6TLzdwYQtMD\n33rzh09XU+MpCroAUnI+UmhWf2c0iXQc8kD7J17kSJMqgBPv/M24jF/V1qJg\nP42PfAIbdqpQqrYe2OdUc/qF02KZ5WJexvMCwXrPWTxapmZmalw4tI6mqJal\ngs4c1xv9TTwVyQnvbuVH4U6Ndd1to9lPxrLeGSybEKpE3mRlvkwYzO917ISu\nwHCm21lIohMgK4Zg5Hp2yM8H3feqn6Ed2aEJX5eSVGkZD4YFmDKAH7fbUjtq\nQetQKivr7KOFesgTfn9uaZqtwHl+sIUBTm0dYRcQMBxAeePMxGXEkbCt/zue\n73Xixx/kngoMYU63eFZWGxyM6Zcstwi4jPpukP8izeXASudUA73YVq41ZkvI\nCnF3/GQeveFoIsL3eUyrSSBD4XzbdY/A6PmWkJhBxFd/Mkdp0qHF3ApVJTbV\nEJVQqrJVY2dVXuvcPsDGoA9H4Cb7qm4/HsH7WWWehTEEpFx4SmxRFyJgwc+o\nWiamB2/87Ko7hiHtS/Ezkajcr6Lzlc6am6CZuwFI7a2UjufIiG6ZQfnF7ZOs\nGnHJBTDMiPWuRKbW9lijC0g3mSfFDkEQcps2POqQlHoRdX0bLTnF/0iuiUn2\n3HgH9QUw7ebi80OwfiLP9lyfhA5tYZlwO2GmcWV0BGNkvul4D7HckFzzBr2w\nla7E\r\n=UNL6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEM9kDl2pfeVkoisUGTYchs1TdeQAl/BqIEXdDDtdyFyAiEAp/74Ton0Q7XIe0sLm3GQIsy95VHLWRPwcd0PaMv+biY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.57ca2e73.0_1616193675820_0.7832080810175674"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.5c058f4b.0","@material/top-app-bar":"=11.0.0-canary.8943b991f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Cdogt+TvLRwKsml+qFj/BKx7Mz4MKUr37jyiM41ne0e7abl86rgqV7gKmUbc3Xp/7EHql1/DKlOANVYhx89gXg==","shasum":"f11950ca8e3633e1eec6f481562dc16dfb19c4ca","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.5c058f4b.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnUECRA9TVsSAnZWagAA5zEP/Ri084aOlcHfCPqXNHuT\nmv05sG5NXqDpPSqrzcVsbxVkqfdyxjz2mgVOvNoHaGee+y9jgLXuyvdnlLoP\nILL2cEJxZeWpBIuUsU4XQ1Suhsp4J3wXHdaGEGOHUwqBygkLKJisa0Nh2G3C\naSveKz4lcT0NlOE43k7rR7zo+x9IFCCJNlYSxBcdLhZNSv0y+LDIuZq0HQ5+\nGDu0tHwAZxKDjtkHvndycKiMbbDwy9AzbYPyogAclIFIc/eZDgs1lHvOaSys\nOBpshbdUUeNMLk1G07jsgamcyL5OZPI3cwtYM047T72kMNp9QDCqj6rGObh5\nrAPglFuM40pXaP2FN+J1V/JkGopA7XzL40bj7rMhmW/4zL2kjmMT0L9elEHR\ngxv+S7SjJLrvt80iTy/gnWHxv8NNtsXKKHZL4xQ4mTI+eC8YnEsPpoePDYSx\ny6SpAdh4V+a3rDDeTMK7t2c+E5hzoz407yqxGBna8hzp3Fbe05hjU48hfXkc\n/PRbg2W2/enapSh+CO6JqWaM072o3Gwkq4W388Yv+4yclzpvCGpziZikjjWT\niPtEFN8I6LnAReAvrAK88SCgPKg1pvVQi0Ht3IMucQuk9W/u48qr25KjduZa\nsV+MCyNtWfuhOeDZT4jnkEs1B+GCe/bplkcxTzyorsICwJFT3v/tsQz85FgI\nXNM5\r\n=OQpd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsIqq7GxqsUkA3UdygyKFnhMO26+NipQxtejn5Vvb+hQIhALjglqxkUh9W6L/X6tJRpzBiD3fZDf+CmZCD7cBSlXCg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.5c058f4b.0_1616540932226_0.999720272708065"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.e27ef7cd.0","@material/top-app-bar":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-1kSRvwtLKeG9BYkd/968fL2o1poI+8/qIGx2B8FFKp0ONEesk7fepHdXk1UkcxGIT1tN/nRUDP7yojSXxf7p4w==","shasum":"63a1fd8b9af7a40c1ccad2bd076233510b2821f4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.e27ef7cd.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4YBCRA9TVsSAnZWagAA65gP/RFfwuFsArQ3mU5swjAg\nhhmv8FBOJMmUWonrgLpezFT5cHmvUA8GDIMbym6cNnbBAyZS4BOEfQY+Q6Ms\nMhxWP09sr5FhHpNID7HApRl0V8lylTalmBGkh9UEt2AzlYqh2rFD5y7znbhu\ny/G42tEYwFIOMW4BvuJxKvHUcu7Dlm5t307tQvzG1sW1088NyzAE6TEZ6NuD\nGVFxM3vhlfvTX8QjMKVvWLzxW7NJX0V6YxJbcmYxCcSrPG+iOtHLJcTU2fcp\ncPpjmFHTZxLNJLomQXVxl3wzjeZkfVlJ9+lmMdVeuixMYQdBwzlQ3bubN1IX\nBWWozCR+hA4nVdtVaoqbOKI3VmmfPFi4u/NMiwaS1PNO/FsXUd8K0AihwW2D\ni7lTG/CfQdnVvH55uLRymkPKOxZLS6XB6Owe7LY/MOkWi6jVNM2a9AHSRAx+\nK/5oirVgsexPVkt1WYJQdulBTHfexxGkauW3sihuNo8xqxgYJIp0EFKsd6Er\nzz5HJfInp4Ji2jnKgG4/81pAmzUrOBP3UT4r4zIqH6kLk7GdoV5XX3Bqf89e\nFGdQRWUj5QPuAFwYYIS6VcProwNoAJgTVGo59EtQFYOo0PsALUoWa/VjUj8S\n9UDALq7DUQ9c46sO2zMEuId/gNxhnPovOdV/MB0rkg0iPEUopwZvzPTQlwaa\nB4Sc\r\n=riWe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCI3ByjqsLG2/HYfStmxpeU6Fk5SbFnjDcq5UwO15Q94QIhAMMWFvAEhBcMRJ0Khbn5VFlIZ8/0wzBk+EcPHWCMrZnU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.e27ef7cd.0_1617135104952_0.9325145520034008"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.15c09e74.0","@material/top-app-bar":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-lQsJBJHwKrZu1a4htzp0EBc5XCNpw0QCOtIWCiAntggYXmjmlmP7hj1C7LNN2ZEEr3dGvuruIB/Ohs4OIMfavg==","shasum":"0f0c3b26d2380c7809423d0ab95bc3bb38d196c2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.15c09e74.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKfJCRA9TVsSAnZWagAAyC0QAIDzKVW/2oaz5RJxxe1n\nqiZs396cECPn3xrX7QvWUXz5jyvyTG7ypDzSvMeaDoC9kbmUWZ5ZQlLeOXrP\nbWS55+uxBgrRe2uNmFIzdt9rP8qmIrAMHNqkyr+FPP3KmJP2lYKTJav1HzCI\nalJd9qsMXYT3h1dkZ6LtiX5YpLor7EzRaXf/TQFMOPMOUSif9cFqaH3vqTXo\nLYNs7Zml9bExU8+W9mX++tsWVU/oBCFt9vuTmwGoUiYS3Y6gCLGXLzBsryBr\neFMN5wG438iFZzTI38howeFmGkstbHzgiYPPRdKxX42QgSaV+y3hiLTQEWRC\nT57/jArsavmj3re5CKY85NkAUdKLYTkp02PVIUbiO0rBZUxvp4FBKzmGtW96\n9YKCQjIZ7lK2JixOae0JAeykiO7qs4DA6tEQ8vZmG0ZliuS8G58MHG6IWnpO\nD1bW9qjEgKdY1wpPD2V+qKKhvQljaU1GIlKkeYj1UACLSAaO1NGslVURghTI\nY0I785IAMYVqKjyYC5AhW19yLiI7NtwtIP4McvcAj4FO49dOhc9ASrQlAadU\ngmi+xdzNyVxBMrChV6ZgPVUe/rEt6lCbE5lAKYaSQwiRvi0LdqyatLV3qhWO\nQnpyOF49ca2RlwBSxkfX/GpbChSRDLAtZwOnZE4g2cyleFx/WRho4vfslp4n\nQfZH\r\n=iqZm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGSmfnbk86e0hPMHEoZxpX2lnglmy1VcEy3zGyK0jNS9AiAbkTdOVE9cvHskz/EPjMkglE0kuHSzTUcHkEtu25d+Gw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.15c09e74.0_1617209289115_0.5255205207357196"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.4dc32be3.0","@material/top-app-bar":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-tYL1sjxlmPNJfCMsDIimsLmNeJG2u6pmyLihOHVnEtBwxPF3Y205qzJrOV7QWbz8kIdEVjT+6whzi7j+ERhDoA==","shasum":"44aefcb9684dd13fbe8fad1651ab5989d5b83989","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.4dc32be3.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQpWCRA9TVsSAnZWagAA8AsP/jwbCGp7fESLhuUZV3P+\ndVo1JIlRdUt+D2hB+22YdrtDZQmrQbOiSkUAhLVYfXaZRuILJrl9THI11ZfE\ng1yGunyYKlOCuihNW0Ih4qGvWFXSll3gnBEpCxiUBJs1hdMF2hL8e3jTIH9I\nMAi37xvpIxat5nsjmWfphAMEYw9QwjDWi0kylQLL5f7XJDXoqLyYVdb/FhqI\nJoOjo0Ul2/h0gIidbX2cFL7KhnYTaSO78fQj+0aulgn4cwousuUXEn/RBLUE\nxg9KvXsENy4V7BETjdhurVaKADBLUFWlHWc1UwJ4JIzw4vri7/3FDS6U3GjT\nYC6k8S5KPH3CHHEKB2fs46xw1SuGzr98jCzS6IkL1c71uLBJgjSKzPT1xx7Q\nKLj9dPoC3xJTZ5gWkh4ks8mqtCttgtIlSgdIIhXItqWLSYwktIo0+3TUas2K\nY848t5Kd2fMMMX4T4FLXz/hkZXhmfuTKxVRYejpZsOTXfbLjHOl6/DcVr91p\nC15yl+fvPwRVzlYdN8DoEZcVPk1zLkKzOqA4Co4kSBUOu1nLdO0d6joT/VVd\n2E/kwMNhMkkfeYLrWqk4RdIf770ruDhKXz5UFCju8wNV0w9AJDcmLVn1qq0B\ng+/zfQV4HIpSe25ZD4tvvr5IqCUaxxWNKoOgQ2BC0mux08Cqik+ICIizAbzO\nHVlF\r\n=ZScx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBhd4QZR/G6Qz6UtSNeiSa0mBY0K/jcuX46lXAT6FyH1AiEAn76JiZbHBB01HR0+TCabfhVKTWOag5fpETObShvelk0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.4dc32be3.0_1617234518424_0.542452034882257"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.4b717f65.0","@material/top-app-bar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-tWGba7dQGuISKVxLN09spbEbalOUvDJkJGWmLVfxSQndZyrRp1oEAFT6w/A1VwCGLcTwcYiPB/FYG+MKdpoDbg==","shasum":"ede8a3d709b51ae71f1a71984091793e76752ffb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.4b717f65.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg2iCRA9TVsSAnZWagAAgJYQAIgNj6J34JexMEesFxnI\nU4xszWRcUeJaHvequeJCWtN88PwhxR6NUfzj/JhVLbF7KU+EDITZ+318nKif\n+G4Ak2e0+Nf0bq99Epbec9Qh14R5jhfw0I+8OqCULodgb7Jl2grFbrvtaw4r\nUrkv/5EAnc5NGtMl8FvRgMd0JBtW2QWo4BPVm49ON/7I+MEMNV0uYJ0Nk+t2\nbx3LNCh9QLD5Qwn6G7teiRpBo+W8pYXQeVJBXHmM9Zr9qYHLeEAxcND6D4NR\nItDPgM5c9rw490N5kFqw9f3Rk3AVc3QKWIAGu3s8AMCq6BmOXnxxlQRRMzfU\nOo+X46G8dOQIjKidKAaESm7gxnKybQfY4QHhfBsD0Cn9qKAEGvK/xJQFUVnY\n8ke+74lD2u0ACmnUeq9Wd+c9JQNSs/sTZKlmAjTGVK5su/n6kv3PQ2V4335w\nJP4DoTBeCodjVjZXFMnOT07X0sxnO4t6deoM7NgCZTztAYoCuu299UaZSsZK\nIARx8e5qPZUJ2ndhE5OHkUREt65lc536utDS2fTRazJ6EfV450bXKolZ8SQo\nmGWEW49jBkAYSK0UDRVRfg4/YZjxVEUluQsC2w7N+S5rJF1/CJ1vcHZGIbVs\nfJbiUxCDZrfn//2OmenzXnXvTI+sA4O7Xq/xrcboinaTp1CpFRYax4YEisz3\n9Etb\r\n=LirP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH1hsE0DfL5ylqyIazmTZeY71Zj0fIRU51ZUk/eibczBAiAMKA3+BKPkKfnxsgKq1cDXLVpkx7YRSgK6nutnED3KEw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.4b717f65.0_1617300897936_0.49363130442535685"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.c6870f20.0","@material/top-app-bar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-bSQQFLSrybvRgEcImK/FV1S81QjXdc2KcMoN3PRYSMk6zNAJpbp2YhrQtns9+zxp6IzqkviYJ5WG2jLzROkaHQ==","shasum":"22a3ee669fde2bec06b2ef445e59d7491ed2ad8f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.c6870f20.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlpnCRA9TVsSAnZWagAA2rQP/3qpxQ+7Bp2+dvfn5Vdt\nFcD6AaCXSeB+GxmFKjCQGIOylqu5ok+rKtDwl/ByoLifcgTpIs98lf4UUvo/\nvtn7xDMByRLcALrsgUQRekCmWl2BLn+271TYaLDnVy8FSG1dEFSZAPGbRbAs\nGQCrSPTehMjV4chEGq0aS3MO9I/1pnhBzAA2q+cscl88RAcHxx6JIYIk86kH\nuFgVTjvGSSmUCYLRvbm7N/bV5dVF39XHyJ+X+5JCYInJfA90VK8mu+F+7Dua\nUEpmEl4dzpP/TJzDEt0tUxEq4Mg9vorMEnxChdhvQwFTwbotdR2ohzcDnr1e\nCOWHC2jPAmiUS6OCZpbTPlmWZ6KMlYVxijj6KbYn7wrDTz82FQYXYTWRoYzt\nZGGF0/97cdkalKnK7jhryTIlrUCLDlaI/jCDVMk8u6N5a4HTtfq+YLSGH4hb\nGDPKzNmk3xVGDFXQDkddAF8fGvJlTF1BBDJfdaWCwevqSwLYxQ6S1hPqfK43\nri82dEs+chZWMkmquYPrN/JIZY1Bq9sIxB9Ahjq4Fb/D0ORAC2DI7v9vGh7f\nbx3PmdBP9Scxs1XROIPxRN+4qZt5sgZAPv7EsD1D2wrqdQc/RZJftoMvbx6b\nvfB+h96io/4j0qBpZwUML/tAoeOt0TZhLZWftAoUbgtO+IC+M50KeLF8s1UM\nJf+S\r\n=eC88\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC14CKhJFZKbZjicfuFKb/+uGmomKSs0L7ZhCbktviswQIgO4bdcTV7TXq00GubN4mBX6q7OPYHADQGUHtghvJpUTY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.c6870f20.0_1617320550882_0.15419226090666927"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.852f873c.0","@material/top-app-bar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-FQNv1aJOqb+QAoE5s9FwND0woFVeYSLeRnJuMkMUu14h7kFBO/nm7gB8UwBb5fxjxG2uZmXLzBKSr3/1FRYc4A==","shasum":"20e2596d2f921b3e8a3907c839c552ad213aedf5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.852f873c.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqoaCRA9TVsSAnZWagAA8NMP/3ylbMPmrjDNpnUmuZiv\nOl9oLmFG8M2KTC27dt79IdXZrpuGLoGhETV4FvHH3hhR+uQh+iskeYYxwabs\n4x2ySqkg4DajwmV2e+9HhrqZoTU/Q+75aYIDfkNXglj8ss38NcRCobZeYYCJ\n5geZLOQmngxOwvGzpGdJmoi2a2KqSFvxoYhsXdc9BXuzVnguBa7OhNoktZX/\nbNSm2kJQb7eBIFbu90PyZMnxLoAdgH78SkfxLxzVEU525sr30LV922gm8H27\n9V4oGk7Zx53PyS/iDC7NHNQEvUGCPR9f1q/yhsoAGF40BmN/YtRqxK8LnuRI\nopVxmP0NN7BpIWn2df6IotmjAoUdVt+WdywbOC5i4TEjF3FkDGQepzGOwZRl\nWjZturN8M75s1+ykWaNsq/KqBc+MJbQAtCDKc67ppBLtnIwXL/Y8Yg70RNHU\nSxZ36184l3oDLSpDczSrvPtz08Pew2DG8/omXCGAMdya0DpKFr1JdSwCMm2/\n7igQCKaWEPnF2Cg3DtL6lLy/CVRJ/KL/Y8vrYiGs7Bxl6enoAKeAD+KqP9Gx\nCdbt+/8Q+rA3EpRGRSowlKfRoojpcGFb/6vRh2c4B+tYu/V9i8oRyG6UnqpM\nhWSnqCWqt3hLypwLrAyMRAizjfG0xAxX0inS3cV7xisnuDpwoNdBGE7ln7s+\nx9Vp\r\n=fpT9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG92M09BAaZfU8o8yfDGu/gcDKouGKn4xRx+dPdIJfQRAiBO08V9eOIos5JBfHp4hk3eTHEb7NdcTu+vbQHt4MQFew=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.852f873c.0_1617340954184_0.2813066416218857"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.4a674a1d.0","@material/top-app-bar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Rva6C+MxuK9GAvAaB8Ss+Vilh6v/eJtfcWlHW8B0OMEX3LAmQFDZmAI9btGJx+RiH2fDMtjdwNh2NRSoQd0ZJQ==","shasum":"8e27fb6af0eb08803e519b3d5c2250cc63cd6a25","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.4a674a1d.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy3cCRA9TVsSAnZWagAArdsP+gMyV2E+pZylb2906Qrv\ndP8OlQMPt/FnqlyzRFYsUEEkc/NI2HcOaJHnYYVYEcAa3JcyyUMqtmak9gc9\nxhjkeuZQKlENoptuwdUnyLisCQcGEouoZmeRn+6DmFAKGV7ec9PHjW1z1k+0\nlc/MjitpeliMh93EXB9Z2e/gHiu7lVFWxEotBC+znOiYdYV/D1xfJ0vFcqjy\nksP1GEzALO0EZcXRk2hm8JetLDkL6p6P31ZvFQUki/H0RTh3ezgmaRLEy61K\ntmsaxwqGC9PW+cTYGV5B8Y1LIHh5dWCAEPFDLYQL5/UoX1a8LMxW/Vy7zKnZ\nuhXvH5KUrsT8bAVjO/drMhvWVNACbEpUXBH3KyxKgkOnxBTrbs3OMP4p2v30\nkShU3CR14PQGNeW74tZPqj7izlYoNU3+u6DKZzQ11mxd0X+j8FH6frLbVXL6\nOUruOAEs6DmOPb0oxvqLRg0Zb0dxYcOrXaZ+0fM82kJ5dqiq6uWcomC3KDOa\nNeCSlkv8leIaT0JeQkAWp/m3/jBrvrI3L+SgG3ADXc/f4rhUgcmaa8esYVww\neS08Ab/ADLgrKCDujIePoVcX1Q1oKD6gx7rtl/Tr8/fvQveD7czrqS1T5m7u\n18FB8CjTGX2xbzDuj0umNRNovMNnOxyG1k86bGb5TTzggKHdX16ECkqyN3eW\nCWEl\r\n=j4hz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClSFUNpWILTozrkTLWEfHlEiIyW0kRtDxQex7JcJzn+wIgJ4peJ8A5BtGilvyT1K3bpuADW5OAAUFmGEcsiwH0xko="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.4a674a1d.0_1617374684247_0.8866214852217666"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.c5b29ff1.0","@material/top-app-bar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-E8knp+l+cl5rd3pTQG9m4Aoqf15x6k/LiPwkTXzEQHJtp0QWJPYm09hZ2lwhrhJkFXrMQnEp+hG/HHQoyWhWMg==","shasum":"a61d0d9372446a346e2193fd99caa16d0749c4ee","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.c5b29ff1.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga03fCRA9TVsSAnZWagAAx7UP/jpNvXLpuGTpPN86fAGc\na730otcFgv+GUIc88HxEOzpoZNfhYuOujML+RLA1bQIsVmxY0dFRiWDFMrVu\n8g28YG8Oh0yPbJ9R5kMPActJBdVbr935dd3cyWivqzK40TgNBPKoLEvtr2fq\nvw6CyEAjZ0l8+SnwLdpu0yl9zJEJKGQdhPouetS/tesvsHvCLNr3UvnBPcw7\n5wiwWDggCESxwzfqqjDdu0nf3WYyBW7Yjlt/hJ1BIEYQJI9wFEJWTjwtdOGZ\nQivuObWtBnysmtO8CyT24ZrTnvYrN0CA1+1ILc74LMxuHA7os3ZYoFgC586D\n+agWI6g4Izar5/gGSsyQGYQvcXR7wPMXfcWRN7eJX47O5cblKt/sfLvn5thL\nhJbcxhT91vpyZuEtpVKCCzqSjBhGEN5ErqZ+hPyBAWRAnpZHH0o139xh+yc7\n5f+/hX7sIMfFO0ZF/CN5ny87cquyZD1ItvpCJZXdhA9urNt8nxmqH0Ig+4ex\n/JQCxBT2wxfKKKA5QyL+Hu5BQarm580iKUfwaS7WqAY8JCUI50FjoXDFSyl8\noySatjAXipvdEKwktGith3NHaKWhTo8P+t1Cmhc15SJHQ0yg0bCr8RnZcC6n\nWusZJdGCH5U1YTxzYkU+cHS+mQB8F1oP4/Wiv5quq0mjYCS7HYt1G/Q8AoLt\nv4bo\r\n=ALoh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEIi/qmdgJIGde3fZwVZCBIsVmhWFpo9St/Hy2P/g831AiB6LmxlU8k54AzwhU+OXfLe4aJ4j7+5mdeHTctxH3AuVg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.c5b29ff1.0_1617645023259_0.11232904605479588"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.583644a6.0","@material/top-app-bar":"=11.0.0-canary.94f50b260.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-fuDr4KaE5jndSzmlVJEtlZzuJlMzvvYRUTC5b/TGoxFZOQsE5nH0Xyt0aTYzERpP3QpCSTjZio78+hgbRrhFfw==","shasum":"361677c1c82e006edaeb6264a9aef85a675dc77e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.583644a6.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga04fCRA9TVsSAnZWagAAsKYP/0VJh6Fzrgkfz0OeYr0k\nXWf6MVJCLlENl5LsBb0xCyU8iXk4vOjdIZZGhGRvqtwHEZ7WJtEidY5KIZtK\nzKzgF9H2I5tYM2KQ5QnxOw57C4fFkSCn6zgXVr0N+OklqY90f3X0TV8aFodz\nGDCxawbJAWS7c5RXPWr98U9CjB7E3bWSpHnYLxMT0IC85OtNWLQtUDzgKH4A\nxTm99W3g84cz9OKlxJMtQbn/RiSceuPKeDgPFPfAqZBpQ+p//iNwFIJE3EYv\npLyt6Ouwo3ESDHdYQlr8tzI+mszgYMxqsZINhcNK23iGiAJfNArmF/PHESy5\n0OSWE1KeswAJrKTRXDrHPp7tGHFsYyeWYxmrFD4LGoJwwrQOzRMrfXZF2rKE\nZZqsVReYxBDaGMllDW5csSLPwXJ6vkdjgO9DKvYmaE7kjIVjNbZPeDyiZlzt\n436iQCf3+UPFNc1j0ZDGmoiU2wQaQpM4tqYPk1bkRGewnS1POrmqpkzPURNK\nNZ7V5iv+x0LFXbQB12zeVJ+Argmr5KRnfiCtWpVNfwnno8t4FISXcytHGoqN\n2OpYnCKfXuWh6otg4dCX1gJmzCqjDlu34M5hTJcr2ARjnj3D1l3xSY7h0th8\nbklAfQyPKlggZfeK3akj3CVohfh7QsL70qg5yl8NjEYH1iTGUGNv1alhchra\nnzeN\r\n=Qk37\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF9KKhHih6Wn4bXPg0wJgE9rr03FeIhyjYLMzMuQ6TdZAiEA9rXi38cKpjB4liuIe2xk5D+REh4aDFqJcB5qBNdz4Qw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.583644a6.0_1617645086991_0.2107174482020917"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.02ac1e6b.0","@material/top-app-bar":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Qcw9GyVrHRyn7KE1eS4rkmQwlJnPpNTrWfVC+APCea372Mp8K+fyAzc+trd52KT6crxivRV5d0SrWv4W1uRPfQ==","shasum":"5640b306b62e7b85ff9245ba3abe9e20d8adb387","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.02ac1e6b.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKpICRA9TVsSAnZWagAA+OMP/3/7x0WLwLNXeCgsF0w9\nGbSjclpSMvBbI/TrrToYXGV+rfpJJeaD80lpJps/AbGcBP5Lk5MwsCilwwAM\nQpIF7Z0WxNXYbrWLQfiwpKcZXmnzqkVRntwuLnYmiKXQWVBz74wG8j5azYkv\n8Pud7pnpyYjgvSyrIjUVeND5pkawsotr9okX4uEGYcGt+BmDSPkEIAlecIr0\nMnY89WG8YXwVvyFi7N6f97mafYaj6pcOU67n+RkMY3MNgdrMT6cBZEYhYXA9\nyjZeTXeY/WeUcOyHo2xnmsTUO3Nsy6Uvq5Z81DxVVimxubz91VrafWsHE88+\n9HTZ2WLmvYLl5XFLv6iRYrHkWxjRR0MzOjrvSD+XKFVBDjXXup6dCeteIjZC\nJGJaL5Uq8B3bf4CykSpKN6Cvt6G5rpsA0ysiX0s1gkgtr16oWT2mS6bhB6Kq\newmH7O3i5TBhm1nNXP+sE7Nx2YMxLAHiKfrfu7aSt/yWtmTxoEZ+aLu1kgR7\nzV3B/T92UmRqhqQghwefo55sEVMqYOk8SWNdD+ckRkcPGMLd15EA6ugrd0Im\nptyD/40LJ5W1nC2fQtLQRpqotFIM8jPDOTDUkbU/VPn0U2iEUm07T3wsKigE\n96HYY+jJpZRzYiWVVuNThU/BPLBC67JH7vhqSNQyv3v70+DY2jwtCDRTMIyd\n+uCS\r\n=LUri\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDt1p/R8gfoXBCcZfUEYnBz1oQ6u9n0v0wiJz0WHie5vAiEA2khJgIHk7oqQ5GIdBmbKgBQkEH1QE4XFMjl8vYLNjLk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.02ac1e6b.0_1617734215981_0.060777971832143285"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.5ac5856e.0","@material/top-app-bar":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-fCsdVJfCtKs2on92W2yQ399QEw5b35A035MGRhZNVyXiUIjqPWCD+M1WE1kqlYs+XRqo1G6WTmA4OSw/SiZM0Q==","shasum":"f5d11498bebfb523cf3b15687df82f1da733ed66","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.5ac5856e.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKu8CRA9TVsSAnZWagAA39AP/0QCpvVmZ+yn98C2nZIu\niXEvG8+amJ/+jmr7hIQQMOB1pTqt9oUFDD8QC2l+TM5DA21kBFGTAvcQCaR+\nxfgdAiabaADs+JYLTA/EupdT3Ras5s+hUrMqyfAw7LEC73Ykg8Qa+k+zWPfE\nceeENbJn/br7gzFSAAeVKjyWTmwJjugscYFqj2WaUzgpK53NpTyPlLG1IVcW\nYS/Ym+HP6M0B4cNgMCtWPdvUcY/gnbWNkKqUL47i6E8E2ShNsW1U2F9gAObG\nVuEMIGCDLG+B10/t1JzrzrY/C6CMDe5BoUSGMQCzeC5a0yhwXJBj0IJfP+AO\nnaaSJKxG5wpAeD5tgbTBN+6h56Xk/3ejMrBGZdRSu/O4MnOHvEOWFX+7Y9P6\nstx/UODvyRVCYs6JYrWu4QaDpTGS/YzS6W2kPWtoxvTpg8HZ3swb8BzSWUsC\nfpEzDqdRFK6evYP0I1GzoKwBpjk1eZaIFuzKQ8PIekHY47UGB4te1w7mS2Gh\nU68cVqfY3Qkoz+5UEH/oOiWsxOSAoouPiBLaApMIVHIlO3NIV/xml5jAP7do\nbD1gIvVCI0PGhF2zKkADvkn1ZOEGrJLD/VxFua2SFMUhrS2CcLMczXA5prwf\nzgK304rf8kNiW2VF32XNt9jSZPV3/0DmYLzSr2Pj2S8vWSYzcpx0q7Wl5O6K\njNdy\r\n=ooCH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB5Id0kNcz0kpHYCh/h6Z18RzPDA6usRmLD5VhEDmEYeAiAkcmnI9oloMWHzUtouj8ZFpW1c8CuNPbTL40sMb500bg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.5ac5856e.0_1617734588547_0.4217947038026604"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.bb23dbc4.0","@material/top-app-bar":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-6OIgQyZVpye/EiLdmmlahEVOaUHeKSTtIiRnkPmYhxjU9GnmaZTOXRDgosyIou/mr3uyGykUxHIHfApv5+JDqg==","shasum":"591b51ec6686032f5178c47cef5fd4db89ee76ce","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.bb23dbc4.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiL+CRA9TVsSAnZWagAASMoQAIbSiih676RQKnvZ/sxy\nUFlwjiJjoEbh1GTIRTMbJNbEHafSSVG7zZSN5WFM4O3/o1DyMmqYrvAUjiGH\nWdkpuxPZlsLOqbadpaZJHUrHKVMPvlg4TA+wwB1+VHsABCT5vt/gnSJMKY1l\nCFYxYfFdWLx4KQvIQ3ZS+9Ynhs23Qg7N58SCYmXSBLePP9mkpfH6CYUqpm7H\nFxkNo5bN8KzB++++KVzGkApSqktkHMffZm5B/SpGqaYlsllZm1JnWautQEom\n8779J/uSfwTIZc9g10g6eX0ZEjRXQFGJZNuVwitimub6mLGonE49U/v+y0wE\n2w7CYGnTkhF4YILy7ErBBeGz0nH/8G0utZRQHIOt2AaA21ItwotlwuWAz4ws\nnQn6XeJXAM12K8UaIlDYjY3aJsqqiFG5sGrYmD6BjuOuChKnfjRZ4ALSgv5R\notcLBuXmQp8fuhvSS+Obq1dEYKJkAAG1aWAenWODfb2g3OIOa7ob/6BhLZjj\nt5Q6N63V5m7c0fJb4U1pqGW2BSzEzWqIR3mjAKnKLSEy8VQ8r6FREauHKqah\nuDQvYWCSgQhdRg0Cx82kxV2RvU7v+fM56XNotO1S5tX5hLYT+3qslm23rzRz\n2qPUrEpKi/lgzFe7WEog1fQ3wtsabyVV+mA/dABCxsLfAK+oJ3ow1DTjKxtC\nE4a4\r\n=M2th\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDDv/uAF0WObEIWm7es43xWQow0iPmrsFYr4FLZi9rvKgIhAJp4fV7It1ERainTNFOzoNf0dk8Te2H81nrCgwPuRhC2"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.bb23dbc4.0_1617830653950_0.302141039729374"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.e539904c.0","@material/top-app-bar":"=11.0.0-canary.c91e8d141.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-R6jJy3/ScfsyCnCoZ9lO3TymJjZ9sDsAkBjU9RUUFJ4a+xL6RO4p1R9zamWCrhQjdnWK2zcZUFtR1xYcqR+5ug==","shasum":"ebb49dd210ee94d85e5c982cd5f7dc98562a81c6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.e539904c.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0UtCRA9TVsSAnZWagAAFBwP/jrjmn7cf//Mly1aJZya\nyChFcuZTDj7BXHKTYFrGp/6CFiXevwLJ6WmZZ6jgouZwIQnmmIwBjlvCsHed\nu3CWFQ/HDCqNVgohWmyh0dKLQjAb6sicNdXd64shH8GTLiM5xZpeK/+th+cy\nGRehM31PTwZa+XGTqc1bSJ6HPhFJHk4lHXbkItW+7rQcNka03fMto/mS4rgU\nJMwK7CoafTMExsB7v0LKb34Cx1t4C4sbjzgBlKCsFB9vfQRLQZHZzdMp9GmM\nk92HR6j0N96GCDGQTdmUv1U1TTmpFgjmIGhYUvS6fAt6jlWs4rRnwDR9xuT7\nr4w/2DKVxo9sM6/PtAHNgKrF//Bj/vc3kT+LfcQaRYmGPqaB60LPTrarG4WW\nL5kehwTHf7ZxD+/RSjZDJT4XOhgMM/rI7K4HfzM3U/VyASS2yl81TvBFtS7D\nbYt+sYzTmJYgMEMRhET0E76eAjM3IJPpaLAedeYIHbJsjyhZt+rii/f7wePn\nlLRo1767CSEtTrb5sWxz0CFe1g3AGqeTufXjQnLH4a34haCF1DxWD/fhoMub\nE8HHCRBYDit6a6UIoh6Y8E2BUxYysMLGhwkcpzSjJR/lSUAolpCUrxtbOQXX\nZLyf+iIJ11vkD6CuA4lBxV0rHqYlmcamkIv2o8eEKuVksIT32Iki1f6+qomX\n6Mi6\r\n=R89e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJ7LecrNz7619RVAHvlb9NjZMAfZ6hQfmPcEHhSWqkxwIgBxyF1+qv53fsA/108POx4pShV6VJHsaX+9TYwfGK/tg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.e539904c.0_1617904940980_0.8441411175744566"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.a93ae333.0","@material/top-app-bar":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-LJxAUxFfZFtTNplDViWLZMbtAsz00lz6BYm+jdulF8oiqAkS1gXARnpQvvJ0p5Iw1KDLXJBNdaX3HvgeR8IoQA==","shasum":"573d7f18089079b5bd2ecd4ee968260d2e986b56","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.a93ae333.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLUMCRA9TVsSAnZWagAAqGAP/jYdSRJqQRqPSx4eqfFh\noDjusJdnjXj2GkjS0YCduwv9XJyaHvm6Gt0PET90oPVOdVNlBA1BZOHmJ/at\nwPlVm69loq99Z3j0a7bgTUPl6LmpFLFglgLuYWn7JM2UltSXNYvKpldB4UFh\nEtH3RGNml5sf5JNk+KtH3CD7kMeE8HRLXIL281SCZuGWhjN5F0izJOYFx3pu\n+utHcJskmfGdVgnX3gUEY/W9aKCIlamHVLRt6qsLugXm2VctZjK+8+v/wAOe\nqd1c08pEl+YiM7S9+04hsxWWqAK01gsj+b0kCtKvuwMLYnBPIi9dC/TDlQV8\nt1/jnYuGujifLgVXkj6/hhlpUjb/+tz9UYkGwbb7kKHOdmcOhxwx8kU78LXO\no4wIrEGuxA7UJRBUQiI5LWpdAWiNKdGOy/AZS60qwqXCfJgOgXqBQAMkwSz9\nDQsaDLFMYtkncl/jI0KQzh/0lfAEd0ASpgf00ZkqaiMhk6l5eYhB1xvhu5LI\naewk+8LVtNGX4cmgFyKWy+PLRwqZXqOtsihDgVFcWzk01p+a+GtA1WitpCvO\nxCcjcXqwYDeKb9P3QU5j60EEMPUTRHAD3Gcf8KSbnA5cWG3VAcdaH7JKSgWx\njefC96gMmqs6RIrhfH8DaGjjL0iUevi5U6l4+AxHt7h6O+rjHi4tB7UuGyqx\nBHTQ\r\n=9tNY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDniKjtLKkk7PMEhr3/ybnbtgt2Mex3Z5CrkLiedrsSWAIgKJ5JyuUrzHNyTbCdqLSN1m0u5TTuc+pfgQHBLnsxy88="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.a93ae333.0_1617999116634_0.7015097278497557"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.e142c144.0","@material/top-app-bar":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-UB8IVGvydbKoh+18rE4th8Yl+YeEN35QcMnYw6F8kUb+LLQZph7uQs/JQsoI1B1X/xnD99oXAiKI5YlUuC680A==","shasum":"c2fe9504614a8274ff203fd2e5d2884b55805f0f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.e142c144.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF5UCRA9TVsSAnZWagAA290P/AjVdmuL0o2haN87hBtJ\nJ2DhcxdE8mJ1sCAJNYf3StKnJW32ZgDEswbI/WAYlY0OWhKwS1YBtmV5TqV8\nThUpDPpwa/gGQOv72xr5J6OsNVJ3MA0ARfTN32YqKKuqB7blxwqtwbGWcdMi\nlajS+o2STtRGHkAcxBIO3d/OCweaFJBBHpqYoshQZfW0+IdPW75RfG5lu7Tj\nmaFfz+ovbIFWcaEzdS5PiOO4XJmSF50wP1Z6EcYbcjFpIo508l0BbHeFeM5F\npADNjM2dNRSoK38kpVQmn6Dnmu/sXlFk2umw0+YKBx4JtgfEmPvai/safiA1\nbP91BkUNd7j+jEUKFYptBggChDODTy0i9qTTDnouD5TZPlRy+mpiHVDGehjz\njCaLLsHYPc83Enca/96Hh/UAgSupDb1Eb8EUwBv+AYdhAp20ciLIcJJO86U5\nkOcToEoX6jXQmF8O8e8Mv44hUSq7rVYGF+ew2tgLrHK42saa6QYaeAtDex7s\nPG8adIOfP5MDKXmr1qQMZ/Q6bRs6lcYw+17tURGA05r1tCCZEC3cgqNE4vD7\n93kri87VBmuPU8vFgHK3tdqtEp9FfMgMWEPahKduaD+zTbkV/rvwjPHwwasd\nKSjDZa+YUodFnfRX9vSRQY8MI8x2nHIHNXfxKNdxGYeu4YklgtmMJLhn/w+x\niey3\r\n=Qy+G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC+nMy60sGptE1SLLOZ72E3RVaic6GsQiKtr+kkyZoR+AiAnkk8GXgeSiwTwZH2W08Zg/M7v/nF+CppYOkkB3BvQwg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.e142c144.0_1618239060384_0.9189286488162465"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.382d7eb0.0","@material/top-app-bar":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-YzQ4V5dJfDpyTuf1Vh+GSwsqFGSW06KDAjXIsRpTj8uk4T1I9K1pgEBK5G1hxzxdRHhVRng3SLBDIdsiWcgrIA==","shasum":"650b6c065c54b7a57a5b0fff27b7b69a74b2f681","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.382d7eb0.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMQ+CRA9TVsSAnZWagAAZoEP/0OfSYKuA4MthQ8Rucy/\nefOUDRz3Z3GuCU/ChJaCgcc7sgfv3oK37jC+0nyWq3U+gNeGalPZSn3ektxG\nDjNyybUZS15ByMrpIsJXPCuSUKt/IH80Yvq5wOsqKZMmo6/Q4F1AyraiRxmN\n+JZujIETd339GXTs6KnUAM8GvCTmnLNuuOKz8BG/4utvZe1J/q3n4uTTbbU6\nrvehQpLlgUO6RdLAkDaGGilqGJFjxTU71fKFKr7P2AJ9B7pcytsLzZ0BsCsv\nMetaEqmQ0iyM2i7S7p0tE9m9xQkO39bbIxdnZ+SFjajALX8B7fEQuVe4SSiI\nuKPwQ969eaINrSwD+deuHMQuNSHmfFYTEoyOp27BS+v3vHvebemCZ83Orgrd\nD9knGoeReaej/CMrgxYDnOa6y78fC1RFQ57UyYZuep8M4fbCWAhfbfOcSqBC\nTQUlKPaQft0rVPbKqRKkGuNOXH23Y+lxIGxIGnNViWMApvDitZb75sVbs0Xz\nvJL60ikU3CyITi/TWb48qbYDaRWBYEGyOM13PvgwGD0mRNXIFD/GdgaIpgeC\n4Kre6XVcQbxKg01y3ZLNOjTxuBfX93CgV82sgVZ3v/qpdCYukPdqsjozhWc3\nce8P19nXXsFuBLqsKzY2IEJxGdD4usuBn5lePXnzfDa8azL87JIBL9aR3ryf\noz5W\r\n=YtEg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGT+FskKnd0Qb3UN3EjQu+RFBMGz2k1TOWm93ObbeU/nAiEAkXqCYk4bDFz/Wmj4PvkbcpIb4uXWGMrdTTjmGoSYABU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.382d7eb0.0_1618265150501_0.3594727707105796"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.b16c7885.0","@material/top-app-bar":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-ZfKwE56h9HvCVTdLgnMul+5jnZazUaexSruaLse3aeZZgHoRzxdMNe8BpUQ+FyKYPMBEi9Rduwspc5yUkpLfsQ==","shasum":"07b0577e0a5bf5e774bda8b0f767b247ca8e5c49","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.b16c7885.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMwhCRA9TVsSAnZWagAAmHEP/R3nDOsuO0tO8EuGI9gQ\nWZJB5pgooi+EigdhhiaUBou4YSFKBBIrXvttk/MZLR+MT1tkw8LB97AjMcUr\n/voNntllZ/gLd9WSFHjfcoC9EEzVHIytMKH/n/SpWwMUtf7EPL+ItvAjspDG\nii8nMgI8X54r5Al10o616QuHpH/AsXXyWOEgWyzakQzQ+zsFls0wMO01jwsL\n3Ry8aANdwgtW0EXgXS4S7GPayt/JY/SRRTHmFnL4R4RvlUyCw8Th9zykdX5n\nLG7Ca8vXSYHu5Ve5B9KJJxjdW8pz3nnYaAUWESIcBcWHHbqFB4orRB9NZQv1\n6xLNEDXjaJmY90Yfixze4wDKN3+lfUBWAY3WPgubQbVCRGu9P6CofpuY1jco\n8I2jdMgYnPGx8dVeqevEsvNwF0gp7usq5vCcBjuc6XnUg8x+k5EgnTgbiq5Y\n4R4woKZ3KAqQO55+oc2TYvHujY/8CUrJZYt+6uELda1nbWg1Tw0/lyKrPuDo\nmzoKdZKSxg4WVSHrfbxQ7Btluqjo/8pFS8m9eQZgGtoOEG+d1wRWuJS18m1g\n1qtu+gYeKfEcXUkXP8zpMtiM9z7uYQhtoHpdi0xzcgwaMvY5wp87UoA6vKYH\nv8grfN5dCu7mmmrzUbuFRIfz52LuVzXgOHx1IUgjy4yw3bKb1ml198GiAAju\n9+ck\r\n=EJOs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnzT6sTcenFmVdlx6+S3dv4Tg7BzdOhnNT/md5HYeewAIhAKw0lyS3Cf2SJ25R1pdj7njxWMm3PMuXTuKE8UBIBw5g"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.b16c7885.0_1618267168910_0.7074887663796239"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.0e92782b.0","@material/top-app-bar":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-htJRldLPjZv/UasH3kVako1Pf9euKBUjwr9H3YZ+Q6SR0vGJWYFHn3iT08OSvbNrwcH8rhd3cgcYpKDQOb/tMw==","shasum":"56ec34983190a6a9cfd224f22cca3b38cfcf49a1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.0e92782b.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda3ICRA9TVsSAnZWagAALJAQAJbqUSlkieATBijP+Q3k\n7Cj9pmiaTSxnst1O3SnABiwbZrCk6sMgX+cJVaQMxrx/3iAxj7BzPvDj6S39\nOPhiMY+2FSY7LVK0uDylU9CkM/NQfUHsFGkHDK/zwQ6lzxgzYAYz9D30HrGA\nm4MTcJVg/js+2Dlhbf/qhoSn+sMYEehxFr9znLGz0JvAFYSGkX1+3WUSCeQH\nfMoD8EMFEqnV+3meAjAqsYBJJVqoY71l+HP+WEajDSRK2cvDnFIO1+s6DhKY\nO01Un4BQhdrym9NmIGumHREPAtmFVIzVtns9Ed2+NTeWKgwH4+JlrAKEiq6w\n53TNBd3Z3jWO3Csbdnh0tXArR3k5TLdLjMHiu7ZynFW4m83K/cDVccpuoq7l\nd5PnI1fINNnAFMczg4iQLDB3ALe7IiFvPgurjlRt9W6lyA8izlZY17hyZB0r\n6EbY1RSRR6NvMbxFOKC/biUZ+B8H7u++wMyI0BTfBmQvrwS4JZybZbdr+RNe\nRlz9qn0f7BX4OEs93XRcD3ZS1Ol5XigVcH5fl023lBJRKXI++yqshpEHBQ6E\nJk6KFsQM4MioXVpEeR4PJeizG0liICIGDhiNrOAUHhpbw71nCQMNEmfub7Wi\nG3RaR1xVO+SduoK9blFr5THfM73c6OEZp6KyzA+yboNycXKMxZ+DA1zsgUmc\n76XL\r\n=7ZZ4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgqYC2pWcNVD5XyyFL75b4O5mLj5ToN/j7Kcdf1fixYAIhAJTFNFyEV5RPRslvYCvd9Ni0wTkoHeFWiFbjPSTVdRyi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.0e92782b.0_1618324935613_0.4264930799316906"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.70b3a072.0","@material/top-app-bar":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-zCPZvU9Lmw77wdTjeR+p/kLKUFSGQUuZyugqV+RDzWclEaUh3NwchO/H5azFE/rxoU6lTTUsPjV1kLF7XQMdyw==","shasum":"bfe921c64961aef0349fbbfbb64211193739bd0a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.70b3a072.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2weCRA9TVsSAnZWagAA+KEQAJh1F7vT62GwOaVrHYj4\nMDU2b2A3FjS+JS8WKyYU+iphWROah0y/IW7vynkR5+bihEOXcViPvY0MyLcl\nZ369HG8uPVwIQyWJ/KoGswzAA8XYXo2O06bNIbVPaPYvGP9rSUQObxHuvQM1\nRiRsETt0xZpL/7F2OsCUs5yFB1i80Wve+wWfZwh4TWZRNp8tW3+FboWjQ2J0\nxCKKiYNQF2yaCZLYrXosCX0mJqvNMUUjIVsx/w+CT/Axdab7UOLWK0YPZkDR\nEQ0N/5N9Gt6YL4v1X+sZvA28Fe5BeJH2cOeqLkQ6fyRq7iM+JGsuMSik/dCP\nVfzrV41w/OWPMfFmdhKmsxThhWrx5bwlHz21t3Uk8Zvqvl93zgOMnco6YQVx\nYCfYyMsYf8Fl4QyhFIy7XdPZxxUCeZAUpRPyitKIjJuRmuSKAo91fjAggyQ2\na0p/MYycCqSNVlSfjW49YMuDrh/q9BNDXX11S0Opli9h9CZvr8M1HC42C9J1\ntLNZiWviF9XDb3Ily7oEVObSufgbBO/ZCcb15QxzOv3QZ3vne+OPTfI+PA3M\n3ENDTqOxW3yZ5GWShnw4Pefv/ztYPUWl+lNDMFFFLF/viJ1oprwKM92Giwnx\nGUu6PY5QMwV6UOZLfuBxuzLY4P+ARAnpCRfKyDRZ4kuwbnE3ViLjeYaWzx2X\nmua9\r\n=kH25\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDyrRSSBesFIPgot/SzCJG/XsusmWGiQ51RA4GShSP5EQIgSnNwGAEdfrXM33Z6Jfo1DojYUgZHN75SxLUrmE/Q0p4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.70b3a072.0_1618439197567_0.8568731791284467"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.ff79b092.0","@material/top-app-bar":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Er1YBcF2u1PRAm3SGqhn+XuNezVE2O9eF+H2gTbnh21xEB17ehpdJ/IYxWCZ0APgktw/sPTJnndjFPpXHHFUUQ==","shasum":"95566a55fb496828648f077ee1dfd13eb1138d8f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.ff79b092.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI1DCRA9TVsSAnZWagAAYMwP/jOPbKYwpFS/Zq2bdkpR\nvE5EBf1M/DPncSKy7Rr2Z273qjDJj3lfIs7DtafgZb/kffVMeMLurLggZwvK\nSAX3EBm5fFZHU9bOhUecQne4kCsWDvpeL6HQWVp6SKEk9Taid5sTDMIn29aR\nA3t3ZSn2rPlDEQvTKogQeYPqqRO+KEeuPiLTh84Ofz1jaZmRut3Yd/cl5sk5\npHlLo8QHXOy15cd9NzTHRle5kxte7UflQdKL4Xnr+ICYaTcSt+2TSUOTmAkr\nAQcb8TsITSjb+Ny9WJlYvKmSI1mrEg1lCTjn5DhwBOBH/cZIvdD+OpEvKPnJ\nJxjBahx02aHBaJMC/MaN9Y5V4TrB7T2Fo+YUy9R6LS0N6Di8hO7AC3LNI1nO\nPACpIe689GcHzGSC2wl8vZdY2iQNHeU6LcChRS2FwBX5+bDWc1wKTikHFMVe\no1b111CcVMWYwhc6VS5DM0lnkq1yhBYKUZCKRGRZNY5R0aW3aB0+QM4k92nb\nT3QR+ZN8cxV+T3nFIgtomvk3USI/r546XXawq1aT/Tmr94DPsK66nueRbKi8\nWYAg+idF0zxmuLjUETb0bMoNzXIWby98Uk8PpeSh8/ZXnxtfRESrQomB+t2o\nbjcDO7ca/LkqD0LalTTBzXrswnpCnXzTYe0S4y6cPHhGMuXO4s8MeEPUMePm\n1JK8\r\n=yzvu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHrzmET/jlzdcgh+bYM/yFuS2sWQ8BWWVnhi29hqh/1jAiA+Wp4OC3Ov+5YonwVMquJkgLGJ0cLHlhehVnS1CSkixQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.ff79b092.0_1618513218880_0.7382615247830444"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.f35b2fd7.0","@material/top-app-bar":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-K/yoUJxPy+E9hmkENRi32Hawn6F5+/d8COob5MLt9g16dz3bFKkaqkecS9jOv2Hl4euMs4kziTV5SHTWs1mrow==","shasum":"ae7d1114d7f05ddb556dd74285e9aa190e369085","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.f35b2fd7.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI+xCRA9TVsSAnZWagAAjNwQAIsN0J4QUT1Ne9hslqlS\nbUUuje+Mc6zJ3emkTPOZ33x33ZgEGlVIe0ebZrW7d9C3e12Vn9Ttqrewje0f\nCyMVqQc5X+cyNdFIQ2Fi+JYgrtpBi4q7kAPjX7KCMWW9uXfJTpjFIbC18kUd\nFMW0dw+CHt5PFWpnSPXD8WF9DsX7NazZOmTt8ukry/KKQEt89UwkSeAeQ0Ff\nu1pnlD18zkrcL74ENKUUahLEaYcf1KWh9KqPRV/z2v+KX4SY/MroB2JLetFY\nY4re/0HOIfPX0nxVgYnZRVwWXgi47WmsFvWE5Y8+y+ayNgMWyHH2zo10H7zC\nRUtZUYIjosX7taX/qeeic8SODWLHjMsAxBC+7plQSgk1Z2/NJAnOqAl75Ch8\no5dWdTlqMq9RrcUmOYOKwwSS76/xAh2IACLbGhAn32CUBS/eTESqBbRYhD03\n3hJ3KvMiAidjn1xZL84VlBF6c9oJ86741TNIlp5zNdmVoZgS8lVIkgftLrIc\nwZzr+5MB8zcv1TTE1JTyqikifGkiHlGhNq5vGQce67qcryfGU81na5GQcLt0\niyQf5rin6OCMrKeL58/DdVvBAM4PqDHgJayQR8gX2NlUFbLLgmPEOpniILd1\nZykDTCAH5UEPdR8+egBJgog9GPG3BzmlI+j5BnphNHxzMtjVMadKsd/KYa7u\nkCk7\r\n=Vw2Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBCcsxWi+xUkHLDGFPmGALLfkSK1nOtm8CGN4ItK+mzrAiEAtg8em+0YdqSc2RJPwcABUsHUfjURFuqqSpQ4MpAdBjA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.f35b2fd7.0_1618513841008_0.6281858465447447"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.11977cac.0","@material/top-app-bar":"=12.0.0-canary.3f342c3f4.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9LTTWea28uTjJzkCGPmGwjKTSm9YKTA2R4tKUdPEAO5Pd43VxVXF1Fetrd9Y5gj9EaVkSFZpqyM0S/WMgKIFtQ==","shasum":"306849b3c0495a96b43f06e4bbe74af035ba53da","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.11977cac.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOEuCRA9TVsSAnZWagAABecP/1L61KTnDrViIPpZ6BJ5\nS02WFKHUjjm+zDMFZZnX5Wl03I5qanZ7APe42u+9GnRZehQbWXFzhUZR4Al2\nfogdlD6V1DWmJGKmiVq0XnqgQqvZJyiLguTMt4RxKuUmYsQXnbDraoUXIGjs\nGISL469T8vJI/GSlBzvO5PngjEljnK/fQH18LNP8Lf6TTporAh1uabrpnfAZ\nEw+fwyALuYbOkW7Kf0FTU+08MAN4CPSC4zUpo/X0wGwbnTKjNTKu8Q1udYvE\nEWSmWJV4nBZZeS9A4/6v2s3NQBOiCr1HYWTvAq0qn9mIemlDAVIJu6oy2cni\ni0QpLtXRvTAODFTeCztUunt7csWYqib4Q3cPuIh9bddnOtJfhFG2zJqKuo31\nRYivej7oC0Xd5Tt+u5XVNJnnXx8mjzYE05U2pa30VxBiuz2ulroDMpOIBoH4\nyJNKl23uXKI8daAsT6aV8cEsaF4fljlMA7zJ4oaT4bywPg2KpK2k0UWRsudI\nh8E+JvGkTR4xKg942sYeSMumMZ6SGsHPcRKSbb7twfkp9QcdyBrxc3phsYYZ\nIUCO1S9MRIk3nI+0nhf7P6QIt8d1H0O9hJG6W3pjUm4GhHnPFrCEcwSwmwEb\noFnyL3ST9ROG2a1PFILGexu+QanVgdv5OoTt64ePcG8UB6M9uV1fKK05id2k\ndq0N\r\n=o0iK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZmFbwt93YS/2r4HuSscr/Ad5NSj4oQKnH04A3CgSLjgIhAOYWHnZNhPK9zqS7DApm2XhoichmqW7VHW3zM9F5UoQ1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.11977cac.0_1618534701646_0.8503631632949356"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.018ff45e.0","@material/top-app-bar":"=12.0.0-canary.cad489689.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lYFmo3JHFhPLv5CjfM3TZ96zRNCAioA/gY8bndDWv+pAUjBCquR6ZWihhvG1mURa2NYi+j26z4Kbsn6Q6WPtTA==","shasum":"b92899d7b488d735fc6a2d9f8a32d61b117fd745","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.018ff45e.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf3qCRA9TVsSAnZWagAA+dEP/3r30ua4peNd5vbuNdJy\nUt+vR2iQPkMrPOreQNu89ge3sxygQqjrS5VPCvRwNH5d9UkREHgRmEnOw2tJ\n6ZmwOz4G5k12hVKIelSOJjEmT9F8Sus2HXf2Yz+mwjURNv/1HXoDPob1UtF2\n7djgUEroBSwAIU2buCWAwJatXeJ41SY3Ry7wCKOOswNZPUk6q9mbwJzvwPca\ngrjTFeizP0f5nd7nnk83s7stjGnqkI/4EBD28GrS9UtUrLbM3UTjdY7VXnPG\nBUz/cUlpADgQq8OLxW34iihKTHPmz4GZNcW6epxNal4pIu1ibnK2n5jp91sr\njtwPhEEXG+Xwza8cYy7/i7Z/f9lTBKBBNxLdxmxsFMoT6GwgU4zx9rpdmos2\nsHmAOUayHPY+/O5GF/I9KO7qka73jNLoeM/DdWsXwaih2Do4dPLAe6AzVRIW\nSib6hFJvogRjxR868n5SAZ75/9tZhFuq1DZJYBpAUKuUnaw7+CBSX3r8Jzs0\namKJmDRA/1kNEhqhlpaTVlGNSkSt87hExnnUVXpJmlEkSHnMBTqCh+vYYUxL\n9K8xD58hZ14U5Q+EkGmA8YWqAG2VlfAK2ZrY9nHg4WzYiOTpGWXSFvjgt66q\nEXTEdBOOu+8+etxtGwIM7ahirO2aR+wPK6CM9X9+2Iyo8Hz0Vlr9PYlno0tV\ndkDf\r\n=bZhr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBBwdpV9emkXDreg6gLkBbFz5jf5V/7QRxouyMYal1AOAiEAmbFgwVoDCjYDudTl20eRSHjfBRPPUc0OY3ngbiF0FiI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.018ff45e.0_1619131881695_0.7637106179938251"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.c99d1fa5.0","@material/top-app-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8HXEveiuoj8q+bkw5IZp7Uuv7Hq1tnfeS5/b5Uy/kevTGnX2134Bgp6+nMDyuubJI5zs3EneJZk9VFmRFFh6lQ==","shasum":"fc7165f1aa3803061a4512e680f8899aeae5dcec","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.c99d1fa5.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxiwCRA9TVsSAnZWagAA7r4P/1ohl8tGdexED6e9jLnV\nEBzTsY2m+3+PlkAYCnZf+0zFtoeOwyrKeLKKElt5687JKKfZyJE+meHvVNUh\n7IGNaQadEEISmMRcWm52mUgmlCK0sLGU3K+8oCPx1nACMSwiUUxLop9oQShk\n7VR9u3Me5XETW+Oub+UCQ68NbO6hBl0CppgEWlKzqzf4WzUqlYvdXFuqzKil\nnck9Wj5cTq5/MXpoEkncLHcTMKN52ITMaRS7NQSOd3+Q1vHSWMkORQxIMORn\n+XtZ5Bi280PZcAdST2UBW9VJ5r2/vR8tIH78kw48TwEdC2H0Edtg0QFJxFi5\nSC/pzynJExnHVaev6ITqrmoSHfwmC4zarPnsjdmud5Y0UIreJMlr+EppB57l\n6x9FDzRjhQXMWeYU2ohfzrV4QXLefpLSlMVQV2NH1MVi1jBRldNXvFvcwBiO\njNDgvZ3ghF4Z9yTeWVidW5SeCK5uVnG2+7RCr1cXjJAeoM3CZRGgJj8dD+V1\n7/oA4GychHwmTvOrUYeZW5igw6ktUKKJKZ4RSNXJjng5XyjTwMSpiCjbVgOV\n7SUwnfF2o1oUnseiTrse2yx81ILJTQuKXncKyiQM2r75/i9npelwJ9NSi5bm\nSlMRLqiwiVYR8g2U/daoOI3JPILsW2S4rzuKwoW2+1WPIzA1KSW1/wHxxbOg\n+x93\r\n=EPcR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFK8JHL9AI+/JKM/CMByoXJ9EpzYYlnIG3Hrb6djXaPIAiEAx1DmHd4nfmXr52MtSQLHj+hCrrMWzIvy8NzIrNsagQc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.c99d1fa5.0_1619466415660_0.10307117585718606"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.eea9b304.0","@material/top-app-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-G6KjX/rdoC++Qsd85vYCo4edKBFCK4B5qzDlkkF4kZqoK17XaJe0vJvdQyOhY7NpZnarB3Bg3C5N8fAvjFSJ6Q==","shasum":"35aec0aba9f6dc1a046323a10495e24988349fa0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.eea9b304.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJXpCRA9TVsSAnZWagAAcrgP/1vtkr8030otkTiAvmJL\nIccoPFkN9IwzZyTgW28UYig5jejhgUlw5JDztSijvr7oTlQ9PfL5o9bvXc1x\nVaqXg3HRR71QmN4pn0jDTqZQN8EAcWVlvIUFyj8pX4FqaRdonReeC8DbDLYb\nRMUiE0JcLP3bdtybRF9aH9G8EkDvcKFNYSEhiLXdVtOqhstSZ/BjLppPp8gO\nKemFhl9inYsiL4bsTR3KcKRlxA2BtUDDHeYb+5hZpQTa0LtUdzUoY4DiY3w8\n9Bgz6BExEZJJLPk8jxBZxJHDVSQRWXeV26+3QeM6r47Wk9NdsCh5hpLIWtDS\niHsUMUidav/PjV2sBUrzU0HvVnjPV98bT9wJPcnzib0Kviuqb51yRcWORZ0M\n4M10t9fOKbxcAKxuuQO/dfJbly00XtIr5eeRyftaPxRmeFMHDNe7HacK6Yet\n2lPowFeHukJs72R+8AO8WpAwyiauSHI8nvqhFDY/AEJA2v+/G1tyYrqR4Cba\n/uD1/iAVpWDd482b0n+0sR4lpmci+H/nvwthKr5iTo0UQ7VK5yn0Jv29lknz\njHDlhhAoyyDtMOcHnFlrEsjSDmozbN19bmtNW098yh0DGdD9IG/5P9Mc1K5L\naEYJcqST1uoD8GflMU1W9PAVbTg3IVYdSoenJMJ30vfJ8MFl6hlrK2rUqi2r\n8lDG\r\n=/L1h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEHNNY+BTR0xEjUTFmiY9aXNSQXCp5uN20rT67W4pK2dAiAyq/89Z40niWXLHgS5FlsA+d7IW90N0/9wDKPG+jWOTw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.eea9b304.0_1619564009393_0.6096685485040962"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.5dd85d0c.0","@material/top-app-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AX7mAc/JbPDvBmvGCa7a4v4qpwgacKTFFNZ8QCOnWWtszITEi0a9FyLH0DZEe264cCM+ZNTisXtJ8Sy6nD8jmw==","shasum":"bb5788b2e37c91e9f04072fad23ec90abc639d96","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.5dd85d0c.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKfNCRA9TVsSAnZWagAAHcIP+wTGenTDDWTUVW92UCi/\nRaINnnL34rta9xeQFrDDRPN93SA/7MztNHXC+xr4KabsRLDJVx4PTPzpKCUX\n9i1sZROdqam9DP0mIP+5EmRw7M9xa3nQjt2H5SPlmSQtlhk/+9D2bdSlAi59\nIQf2oQzElXpXc8BopAcNJayPC64xj2JGOue54hnXaaT/8/ru6M/OIDD/k2nP\n6sYd5hLWAQ8PpAMzLUyQvsqRDXVIsfpVrM9BX+cknfPbssfTu5PKmFVFjXwS\n5MaD39f2LSSgo3WBBR5kCb5gkpnvZ/nLf49FxMeVYqvZW8GiiN1ASOCfK+ba\nOLaMRzNmRQkzNGMGpt57MTJIOtbps05eV0qyqYYuTiDzpdOrZSRVllamy/q3\nL3OaGvQgLjnuliXapA31YtloNzjciNl1JIqq1bUOZQgvDY4wSa+I8fmpR2Ck\npPeYY/R9gZtz38KAgxrZevlVEuU+qweE3rySXOXTTkpUwt1/csuxYe9hsJMh\nA2SKBfYhBjgJ9A+OIbzbWYVfwJZQi93c3YolpnKSRWud85FHkiecI53itxx9\n53a4H9DlIaFdgyyYBzcdEr5gcNsmls5Sc+sif6hNUGnJaC9F9HaC/+/dMXa6\noOmplVT2MFAYV3A6J+BxUws3jYq3Ottq71/ys1bPMd5pljITpP7G4s3kDhE7\noBm+\r\n=4fep\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8BN6/QyDls70NkJmNT+drUHPC4eby+lBMcwtgfsatJAIgK/8LxPiNQCdewFPa++FqZPnmCNpDnn4++b/DuqR508k="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.5dd85d0c.0_1619568589175_0.5775809346470666"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.cc813cff.0","@material/top-app-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0+RB5joEHtM41CH8uJ9o1lsDqti9cM4+jNG+YRDMa+hDqrggYPZxi1w/DO+PKclL21QWRa1MCv4hMFhFXPQFCA==","shasum":"881122a96b42a2c7431fc867ae6952fa10e9d78d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.cc813cff.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHRqCRA9TVsSAnZWagAAHZcQAJlXFAmfda8Mx3CWMtK0\nJVRnOnG5LgDh9q2mHF8d6eWEgtXJv19+5hBLr6UXjhI/p/9Kn18EiKB8K/SZ\ngtl1HcsBS0rFXvOaBxlIuIavitAsFx2x0YvOknRp6x+R5/DbpMIOM/Q5x65a\n3RmuunwKtFsnU1cITfv24ea/kZyMATwuYiXnqHbGpuM919Ni1+X3hCBA5dbW\nwjUoGY7o6uHjaewonA43IpmKJUtv1q/tYTUYUe88fWKeUPRO5MkW/0R+gJSX\ntxDJsl5aoQC1pLmHrroaD3HSBkYA9jomkULWeO8zBP0XTrczVSqZfVb1KiJ/\n4n4jkm7oi5euCfT5ABlkFHUmki3EV8Jc2Ua82JFdD6J+h0Fm519n7ESY4YTW\n4c1QvelO8gaTXOs0eFv+u0Nda6VqRPChs7S7Jd8WDlFI2ZEK6ndCixzlkiOa\neM+qcuAIFYPBHhFELB7a4nzYs0m6Xe3A+atIbXoovZxcZXVw7Da/pdfRRePh\nKQzQuT/+1jaluuZSPkt7Iz5kgjqARn+GyIxOyxGpYNucv/Hr5unT+jX5QYZh\nH4cAtVZvS0jSPtE9yAfidcj5X7XKPG29AO+LWXL9676WRSXpjfhrsouqmcHN\naAcZfTWp5xLjQGY4DkmibFeFpjvzeqg7+L/MUYaag+cFZhnET1fYmcEUupMM\nl2ue\r\n=mQAs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICkjOdIuALPJfuTMuiXjbQ6LLwUoyE0bPQzNI64NMM9hAiApkW3zPPSXiTwdMhD4/RspeU/oV70ePqD4oHFCF2RvkQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.21.0-canary.cc813cff.0_1619817577883_0.365046721742331"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.21.0-canary.0875e898.0","@material/top-app-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yFct1g6f1dmqXphbj/PWNBQlqsxzYEx/BzVodeuctRkq4htcn+WizZkxewHkCk6NYYnCXgDtwNKcynfSrsJAow==","shasum":"a0907f95b079dbefa0bfe1327e2f8ae847b9fa3b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0-canary.0875e898.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHZUCRA9TVsSAnZWagAA8QwP/2Rc2mL7Sj/mAPRZlvGe\nkwPIVUZdn6yH4yMkl3blGaEdPKlCAWMrE2SZRYjPoeqYw3ftlgKsLqasO3QE\nm0x7cCvvbrE4vgje9VeU1J9zlTPPcTTT26BhXyPYPEOiuf2h2W7Mfc7JlTv7\nQeoVFNBB6w4zRMhAKz5GyU29GA32p47PLftUrZWfJaOSNp5qbxTPHsex+3Ms\nsBOva+YHYfvL0r5OcKZEJt9IHB46IZvWVvC2p2+OqifnZy8gMqhcAFlOUVD5\nVq2+5WOD0bzRfbCNmplKb4nxmbJPTEEEDfP0N6leYFCd3Q7KlO+smPuagBbW\nmyqLJIgaqnfYVKK6+MnwJSYuqq65sSTrTUf1bs+LeomC/LxtGtdgWtY0CtYC\nOylgm53jTEBPFGLRmSKWKrv74/+Wv5SSKnCrkpYYeArf9DSt2FMN+ZomguhB\nM2C7FbFT35wckY2RKlXUBOgrA3Y7wXhRjtMDsb2yoIYwYJD1+wpFgaMPgpHp\nemLAS/Z+e/bO75JmvOHdhF18HHT9EKAvr8INHu6GzwmRy6RbdVmUshSziIqG\nBGIsti+dPHP/ILPTKpLsP3BTDhHGWkAhT7W07ZrKAXM594TqCTzWD5iSX938\nqCZvQDVJQYUpiXQUB2lYzkKpoGYR2tZUDW6vjIRbVabNwwiywCdSxlOD4dZu\n/lVw\r\n=7HXO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDo585AoWdEds9FHyHoVjawsqXX4sSb7Y2W2HG+5cJrrgIgYbGcixdexxCX0zwKVROUosGdEVoQsi0yBeQ9pHvMA+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-fixed_0.21.0-canary.0875e898.0_1619818067924_0.7678091960683828"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"^0.21.0","@material/top-app-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"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-fixed@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-Xd9lEGWahV/h0U3+RXkTmS37EwLY0/ey9LI0qOGMD+AsfsIc+21Mjo7DxOIAj3gJc1b5k0W+HiXct36rhaDXVg==","shasum":"dbc65ce5ba6b1a78740e765bf27c54fd8b5fa69c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.21.0.tgz","fileCount":9,"unpackedSize":27329,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmTCRA9TVsSAnZWagAAUq4P/icQXJGQoLb+EWf+8KJM\nWabJPolS1omHSkEa5yJ1tJOiTChNBnaBPi3GaFFEQqOS60hhilxlOuQ6AOm3\nCNshqZsHpbWBRXOfQrT3MXZoUBlKhyGwzIP1usmSGNdo5G3sJrczT3MP1swn\nhKEoAVD0RsjmEi2aFe5R04MPj/rSYWWJBY44Lk3wJv7BgupXhKp7hmucvy3k\nf2yr5u7rVDf/lkRq/MFzA1q3QXnoeMaOAGB5SN7w2a5yYBU7BJVmKAUEyxUB\nYjnLZzVkNDAysfO5h+xlNU4EhWUnGRLNuiUM2YnayIuBKpEqCY6JQ239aCkT\nPirNl/Tz6HLrLoSKL8b6SDooy1MJ0qRkdXz4bwSniSuVQwQHyCKCAT8fd9rX\nm7u6lXN6NfH0e8qzzSsZOxPy7wCwU6xWVTL5McXLDimap9cOEoApKfjcf51C\nD3CEtGRNlq/VzDCu0+AzWKbm4rf8XBUfmqDm9rGeCf7u8HZm7ql87uj7pWSH\nBrJy/tVxUxqGyCc/dgMrD55nS+gVGRvYh0tEaVVDMDNda62V6tnHO1BKQYf6\ni8Zuv2rkjPdI6bpOOS6CDJiJrTKf+kIMsZRHLvk9J8x43mvfUuSIfujJDAEt\nedemdF+aj+5T/6ID+UHCE/gfgTs6a6+LNd3jX2dH7OkZrlb94CIXvnW+Wjhj\nuwwO\r\n=4LOn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDu3lM78+cDtdHnd4lI92Bf+nv1gSCeWvL/qFJCVmNZjAiEA3u8ftNEEAvqKJKpFrGtA0NbvM8mG05fha4zmc4CnzOA="}]},"_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-fixed_0.21.0_1619827091190_0.5654257046375912"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.8f1e7e1b.0","@material/top-app-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-h8sWnPBezfjIwoBypA3apb4N5Yz04yTEJa/zAOPR9yC66mdiatkWFdhBfXvTgk0svRFzjK82sJ2JFXJo6dbpPw==","shasum":"bfcde94f1e4a0c1dc5bfbb126445a697b998280d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJtOCRA9TVsSAnZWagAAdf8P/3jSCiKTnJxxferr71CT\ncU2mNMV9LevgPGMgHPB+TXXFyKBfDiQSf+7B1N09d6KBZdejYo1ObF7XBbkO\nSi//sXXOY7kbNXOY/klA8SqbVeqnz5A9i6MjApVmBGf+ndkypBuzAgRDFpLk\nayTH1NfnIdIGw6oj+b1Di+q/U+KigoKKqQ3wYeHaJ/FJaYZvtA9RDovmimgF\no1g96RKROwINseoOricp8oY4ewhK15f5LAWUubIN5MV7K+i7+RU05T9QesNl\nSO/A0YI7VxBbcsAzEfrDiGOyKozfkW4ZX9gbx8mCJaOp7GaxP6UkkKeRXzW0\nSoUMoP7ScNfB/RT/9t8pg4Uxt6ieMg18BbFQymWPQt4hu8sD4fGuUuN0SrTy\ncSCq81ilX6xzKWK8x0BgbuM2zItFrM+jYgBtCT2ln40S61J1rGF2dLkeLIWe\nZ9thP0ul6+K2e/rLMp4S6FZZEVb4FZtO5p2ksi+14uze7e3KZ7stIZ1W6mno\n3s9433gxagMdJeCj5DBELu1EDkYQ0R+KTniqW8+PJ4xEvBKIcG5RAMXVsPn1\nlAkeckwDcY0c2FlLZnSDEz8x/xKq03/vGt4N8FGknKuj5mUPNUx36VnR5IGa\nDAjwcoEuS1v702j6mIPc3xgLpHIYMd9O52BBTdoALsDJOYyDVzxxmg431ou/\nEVLY\r\n=1GUv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2kTUwdcSx3pf+WXJlTQHOKFSF7Klci+J+y3l19XoO8QIhAKBiorL+KSwET1EMoTA1q4q+bY0OgOJgIgbJB59Ioybz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.8f1e7e1b.0_1619827534596_0.2714046357816591"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.deb0e792.0","@material/top-app-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-P6KfAXjmtD6xUcTNpcXbaHq9TZb5t6MdD40HmxyGyQMeep1eznn6LRYYPK084pexW0Y47ua4bZIamtHCNu0c3A==","shasum":"da2504f506ebb2c0d59aadfa59963f8569df6552","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.deb0e792.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGxpCRA9TVsSAnZWagAAPJYP/1Vxs7HmJ+Lb4wP6Zw+o\no/qmuFaZl9r5deA14Gl5mcErY5bq/Rl5u2xC2v8zzvN+X8Fe0u2orl4SksE3\n+Iqwp86jlaXDZVBNsFAkdJnsZKjLJ1JWjV14dxZ+EUITCmVSml8gk8jebtPe\npyKjegtU4B0QaCfuijWAAwuYt89dylafSI//owCvujSLMOGOTU9/551dt6Vu\naQACbrvObGVN5HuruceuZi7zQG8PDFzeAcynAnTzVBVeztIIhyedpM5iEF3c\nTp7jw7dOS3eyQ7SHYij6yP/tnmuvkg05r3Js6Y8Yo1/gNnU5oA+DwAY60Bj1\nvw6+ZJnR2b4xurYd6WFl0WOsVIINetkeToF9iSvbZJlxR95HUXW/+Aaa1oNf\nZ1umFZ4jGEqn+aEDppU0T7fopHbecU25KLMWHWRvN/COo9S1F3DUAjMcWm9L\n9gR4OTJ5hg7IW6HaxwmkI9WBJzqpLNqMNbwtpgFHZXJd/0ZeoBz0So4xtG14\nmjd/Zbg67yfWJZ/2wGoIzI+t5SbYMOP9uA1zROJS4JMA0L0iSbVhDju7yx6n\npDaKmUOz4GEqNMxvovfUScZI3reA7ywyW4BYkkbQUlbb3Vg75eNAoTEZ6y7r\nsBcx6jvDttxkoMjWRgh69mJU7hMDj6wfhHsRVQs5CQopSEPCF4iDPdOtcHzd\nF7H1\r\n=p2XR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZR+rQYfnQ2FrFA9Kx/tAg4ssRchhpT0bZGgpp839AMQIgOJLQjklPpRF1jEJMKxfktweexp1KjzZKExFd+mNMaUY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.deb0e792.0_1620077672651_0.2599892104779711"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.a3ff615f.0","@material/top-app-bar":"=12.0.0-canary.474836ad0.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bSMorvS+TSkr+v1CJZxdsHBdeVOrga9UBwOlzkTPjEhiFrLWVT7hzgzmIbCmYmoNf2KWYCBNKBIW+RYxKZKQUA==","shasum":"0cecb5006f76e6a7976a50f8f9a4232ca76c91a9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.a3ff615f.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHpVCRA9TVsSAnZWagAAwF4QAJZyOpb4sc9yu1o/Fo8R\nH98Ic3CE/6s2Wv/lzKTKX3YE1MSE5OxL+xFTsOI+6WBN0VIJ94eAUxwFe0lW\n/lpLOVspHHLu3ahsRzXirwogY77okXOIPOiTYqYE0qbbJYunmsIC/2gOD/fQ\nz4SrXP8WMNz74udL4xsVftL6d280NMGeqE8qidm/EyiRoQgLKCfWKiLR3AWe\nQBAXU/4dMdWMx41B7LNfR3Hy+6dtvIr45GyHdMGaflsoRkR1R82X1Fovmn4w\nIR33bPrzw9vTnrb+F6rI4q70c4ZP2g+7HlNh/AeOeFLBGHjuGiaNVBVv3DYC\n3m3GB6tib4wXgA0waRLMCYauuWUU2mBzWra5P/rIhb/XpBcgT8LT5QMNa7s4\n4eg6bWJ/9VMVoq924nH7Y/dxQ5LCZkuT63JOqj1I5X3xSBzIIc7u4DEODcaQ\nK4bvFtvUyd6EuSOmtw6SgFOfRPzHDyqlybQhnsoxxYa+Dd6lCbSMshrl12TY\nbe4CEFq69K/XRvqyxODx5zrp469PtoRn6U5eHBzO+6P4Dza/weq+wlWdLPjC\nMJulqpET/nTTMy7+6BB2+mT4139SbAYS//2J5cPs+/YLAJMWoacHSuNmQWKr\n7icITCc9eixmWew4cSDlvYAtSCH1aNGk+GpNNpeRISUOjPPYczcPTc6HzSsq\nki+0\r\n=J5vG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE7FPqWOPPW1C8nqD66Ih8mzjJ/xBaz2xESvdt4F3/Y3AiEAhYjD4ovfZFFXrW2vnwnmYe8qRVcOE/FqRsGhn92wLbE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.a3ff615f.0_1620081237100_0.4882997085552272"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.948ccfb5.0","@material/top-app-bar":"=12.0.0-canary.474836ad0.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-nDkMsQN5QSFXHnyaM0SeT3sm1Pk4dAqHKy5AouimT3DuZ09Bj48wWHXNtmSNyIiS5DB8dePJg3SfVYU/fsbCSg==","shasum":"1c06ad8a0e12f3f8e54180515b13cf50a8fe1457","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.948ccfb5.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJEUCRA9TVsSAnZWagAAG6gP/RVlA0c1rNrwIsDY7tm/\nWZcwqpm+HiOQojSD7DFOY9cRf5rz+/p9HMt5xcBPp1Q3Az2fuVU/sHl4okkZ\nw/398VvLBkmBVKK8O4orQDs7M/TeNzeHnhvQPFE/Smqi7sRnXpRKYX+ynOP2\ndz8wUq85ncS/llxP8NeJvFjL04rAtf98EpZIcZnoA13IBiY90D35Bli25X0M\nXuQZJ3Zn9w7pm3maaPB27Ze1UzmDnu9e2dGzqnUcKDsZ8PxANNKzyqPrlJ2D\nfvj1pgiiCTTdoKnZzESvZBBbfqBEZ5BDJ2rczA8kX8AR+RvXuKLJ4Yi+sWiB\nrDmpzMLSMqUcRYhfVdYSqj6j5z2h990vlvuc4s7drkHuTMGkM5WoR7yEsZ7T\njIXjdj/HvrAfkKSLYi5SG1igsR+zb75V/pQifE6yeZdnJkRJNVkGAcH7Tfgs\nHducCIAnWfC1nTFXckz/4HB3kQ6ExyzJWYfYPqkeNJzQLNO3pvQALMl6j0TN\nOA2pWSP2vueLVpaPzUJrlOswfCitzt0uHwrbetxNWLN7Nhfe+ZPhnsz9bmFS\n3h7QYfFxZ0hKrjMfcJ7hPNnBICfYaHewcAdw9+dPMjoEbxHU4PymzDY7TYri\n+Bg+Lp/Aay953Q709/YAlxglTpSqzwbNdRVZgbu5Rthi+yBiKf2a/ZhPdEXH\n87m+\r\n=8QNF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEqEKqKsP3wqWMzUv/RW1so6xFw3jvRfYKqDJHuCwq2+AiBsk1jIV75h+WIzD/Bfxmm9qfEouXNxrZaNgsJj7WclTA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.948ccfb5.0_1620087059578_0.6281169754546891"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.9f8337d7.0","@material/top-app-bar":"=12.0.0-canary.be999eb08.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I7Lbf85i2nLN8z810msUEfW+0PBb9uuHRYgRRbIoAFnubzJz12Cd4LLhdVMqdM5DMAP5zM6uDhdXmHUsrXnTKw==","shasum":"526e437cf0b74c8c853898e0eed59a434f717c05","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.9f8337d7.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZRbCRA9TVsSAnZWagAARsgP/1QjXe6ydcKA0Y50EJJP\noOebTRNCzQXq4/2o63ym4A/4W7N4h/p4d1NUmekEvVvrjw8QvrBFufAUJs+j\n7y1z7Cllxjocv7267+/uRN8rTD8+KLupF+oJq3HVFMJmCqhaqDZJTwsJO5uH\n1L81U5vBHPdQCnEQ/W/U5lCHs1qg4r87rpTPTj9yVhHC7tpeRvMJyOoYa2m1\nz96L7QBSYnx/QYx41rD0ti7wg8pPc42ZpQ7sav1P+aGw1d73zjpoUBx/0Vna\nHmLMP6cM+hoAKOOmetMKKbmaIL1hBDTwb1apa7K9DTAJAmH5OzeZdpAK2JyR\nbqDI1Ma5GB7MKxHIntZDGF50CNjNHsR/+GJ/Babs26cEOSJne7uuOmZ3K3hG\n/5osPZ5VMWyXnyX8qLgwaSYdL6yMjTOzA3NIB2N+aoNDPJMQAJzeg081IKTo\nnqa9VKBsjBFp23qr92f7hiIPRSgAqAx1RTanG+fhknac7ly2yqAr5rdWbm4E\nS3+AlNb6GkKS+3aAPiQm8XTiICgOgOLHYWL+79D2LaPieieEWukg32BqnK1u\nAC1D+CR0f1Q2b1B5mFV0gYUq+sUVwT98itgHXpy6Ob/m/mrDQvH3+yXMmfbY\n9GuWz8gJv0byQWBe4SDdo5O5Meurao7e23nEh5ppqiCDkEOYb9bpRQla1V1G\nRyph\r\n=LQTa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAEhtnj/QQ4QB3LHX1YHm0FQKCyQATna0KXfxwrlM2V8AiEAxNj9J+0SZrUB+rD3T+N0HLq737fqJjamLZF9srGe1II="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.9f8337d7.0_1620153434716_0.3119577433077205"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.5813480a.0","@material/top-app-bar":"=12.0.0-canary.055d4f10a.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FulhJ9A++4552R+ayA3FCnP1qTMeXywzTE+/gVUw+Ujgp8ixSNFWoo0BhuAdw/0cJGj8hDF8MMT6m1JCUCuG/Q==","shasum":"23904d0f3e55185d2c5f050233b75ff86912c067","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.5813480a.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuMoCRA9TVsSAnZWagAAJtwP+gIONKWeNGpJn8YjgH+z\nxZKn6+KFhEQr/YY1kd/aOG2FHfIphQr4nJNu7qvedVr8JMAjqLlO+5fPCT3m\nvL45PCMbqYCUZEgCjAaZQM8rN+77j88dcQ6Jz/pR9jzLesiX5WjsScmiAvWA\ngqnAZadgsXmPOvTJ/868MNNHNnFVYiRoUvmKLuglsAgU48+Sx85oNhIvhBan\nIG/6wJp5A1GRkYkz6j/TMkg7uBP6fTc5395f5IUhRA6SWcsN8ONZorPnLhk1\nWRcBiYkLoiTmYpFmRRKoaQ7DaedIZE57h8lvY8QE2bkBeg6RtnmmXr1ZrxGm\nMdcq0e85nnsX65MgxpyixUtlcFVCwhwGUDkiBGLqJAaapomhjnVpppI3soOt\nOmH6dJ6CR+cvMn3Ytq50nKUMaLKpXsP10zZUA4X7rn04N0g8NN6xIsIRzgpo\nyx58yeUlYSo1T4NzQCe+I8wKl16CYNgoRDUvgv9dujRh0mglM3l2y2ib+ZNy\nGzJlW+d7jNblkVnYSySIZgfUTg//gLbq5KIKDdZ5sNeaKKAW5t/8tiWIC/+5\nk1v7j1K0KSohXmjQb9M7GH8/u92lxFWZUu0muL5zcx+1ipeijoTPxgbZzunw\n9cupGzOrbh7xKMyXBxhTipMNxFWvD2vvksFmsOCjmYu6xQwTnQJ8zeMmSPBv\nzLxG\r\n=bII0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBqZO8xrrySKYVc0o38nE2qFl8xiU06Qfe3WpxEnGjfBAiBlvs1DE+m7gsSIPmgULYvJAmBoT0gJa9k9wCWDHfQnCw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.5813480a.0_1620239144109_0.10714528562762515"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.ab7fc1bf.0","@material/top-app-bar":"=12.0.0-canary.03f525f9f.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ycvvY/G8oZI2DsmYC1G13ebohr8Swo0wa5vB+fH197DLvoRKK+hV8WfYZY0dmtOiKSngezJH8fccn+FQU+1gjA==","shasum":"e8774a2d756d03ff739af0d9b4b4df4d399aaada","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC6RCRA9TVsSAnZWagAAgUQP+gK9kwA0nCy+QNePY0D5\nFjoJyhqFCkjUuZB0M6Vgv86MWfMrxdnjgzMBp2A368dHTGqrUiB72cCgrNAv\nBra6nglC/3DCuA23xf7X75zC+ATxHCtJm0MyHlU28m1lS9OXILqqV9Hvobx6\nyWBwikwqmFMceSdiLVLIuII6FijWkFq7Zi9Gb0y/HBALambbOqJQSTNJv4jj\nAkjqy1KP3JoinVhZ41kKKBKgXGXa2d41u9X2lfCH6Ph38mS/7m4WtQDXiilO\n/hXnxZEYxOSSMTZELrG+dQyZhas6TNot9G2IXLfzcde5MtaGCUlQFnfaHUG/\nmXcGyVq3ejElpSuUCM1ZqKlwa1TKaA3Na/JflFfraGrCJxJ1DOuffeBjrj7g\n+dAzPhcmALUVUxGcU7owpqsePLBDlmgtUUiMdrRdLwZl7driLafyLMtKaX5n\nBEJn2PdeJRXRCEiV81brVMKTmA2JURBjqx9sVvVJiG3Ywt524KWlRTjhRGrP\ntUMuy6AUaHyXFFFahQfKGUJkoZJSBYOF36tXDHZPkwChS1IukHauSM6C1eIa\nYxfrfuFBQaA7ghXtyU7nGV42c2+9vNcJZ2SQKYWdfb1oHnWaPcaLgdhevfhR\nMq/hk+B7xX7JtejX4NM0g3xvDivbbEBLlU3Z3Xd6hWvqSiHywaku+ukR9xDa\nQrYx\r\n=FvEw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHdAbUhP+lF6IxygkK6NPVsSPr4jr0AskzMAfcKOeon6AiBolguGRj54QaaNxkbwlPsP9zcA2X6kaS+t+k46/vXByA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.ab7fc1bf.0_1620323984773_0.8033389941085771"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.25693d60.0","@material/top-app-bar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cg5Ta5IBf5TXYFLWthmbXTxUyWZyN13teQWwgJeJwUPGkt6zMI3qsWvSC0TOWuZ0xx+aWTMQDOHLKYUtP0wdtw==","shasum":"e43a716fe9a583d656e2ebb08a4a737d343cccd9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.25693d60.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbeBCRA9TVsSAnZWagAAHlUP/AxQL/Agr8oRwMdNAklR\nGAltu6uiZQFt66LcUTgASia7CF7J5zi1xDTjxK+frv6bxOgyo9TJfUDYQTt2\njSYwOhQ9b+pO3edB0MHUVjFYB8Q2duOVR7LSEEamZjpqVGRJYvGnvRIhzxnt\nGfjNULImjT88LdcWubYxKFR1BiAg5DnqBJOzuuU2l3pOCwqY/JT491jJ7yrL\naMPuASJPllnSScOVwmmHya0ydeOPZ75k9fFAZlKgxbXwKs//gmIkaO/T7Juz\nL2tHEr9dNFC0xXQ+9MI67i+RLel4bkK6agz6BMiZkxVWOXGOICx1fHkK1Lsp\nGlrcSw2QHzpxWgQg9e11jWBZLakYoXgrqHgTUqlr+1+8XhZveeEiaHuQ+xoG\nafhLqG9B9urlukOndIH3gEkqDtzv5BM8LONjRmaUapIx1mBV1Hm+UqrSr6So\nhHywsGqhr2JTzhPi4Kv9iEPCJF9dksHqzBZ4Cw/Ha9O1Ku6sFIMmS4Enx1Iz\n121DAD9Z2IsBXaB1uuJ22u/ArlhjPf0uK7sZ5Evl36+UoEF29+LNUiwyehEU\nRGyUcr+qtxXXMk2SBmE8rRC7kamXJ8vpJ/RyvsHgfgwsOz++X+e85cc/zEAo\nwCaXybghZyLRgADy2m31fbpkXKxnaYUuyFE3B9OWO2u05iaVKez+THp8N3hR\nPUot\r\n=j1kB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF1x+g5iMsIpKOO6UsRoGQRWvP4xvUqzuJN/cSNkVc+ZAiAu4bIgIdTbaX2WOwIg/KVuDfQhGFkNRYWpFuZxm9rXlw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.25693d60.0_1620424577204_0.4237302141307291"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.c497962b.0","@material/top-app-bar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7WGbxZLqRId5VF3YdBbaw50rMHNEGoYVbVSASdTglbeTCvi2W3xxI0W5wVV8LL8aMr6OcEwiLVaXkKGVmKq2Qw==","shasum":"7e13f812665f04cec068048ed6f8aeb961480900","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.c497962b.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb0bCRA9TVsSAnZWagAAyKEP/00oXldnDadJu8vDn2kt\nMeDqn6S3dv5ROTmNnb3zSBK0yFiJ2IRoX+UtpGSIIBN0hHlX9v9vkby/IxxL\nC9p2pQ1fl/PlkCfg3tdneG1s1XHdrRKJ7hMi12ct2GmSgaIQ+P2KJIrf9jjV\nAxYan60JmntzLzv6IKCnngn6ZfNbGxNVki9N2DP4k9+4JeYzvCnIhlst/XDD\ni1QHbzAhtrrFjyBSQVJQ3CgUCscffhaDe0Fx6GK4/SV39XOnefBbgpJZRjpm\nhJm3jEMFDucPXbHPB5mHcr5HisNcC9OMv/BvFRmkJoUdK3nbOAJdrVYSAHlo\nm2su1s7PRw97pU1JLOyqHOuNeZ+/wsUD6WgCdTh9xNBMdRQSNU9vpltqffSM\nkMMPAxBjZmSB5mGz8WISv7Oikqllsc5lgx9Ic+0ESkXI3KZ2Kw+D4G/puLVz\nmmelWkqtVq/RqsEIhNlWDVZYPbE4Rgx896RnC/IovToFJtsGK8a8PuRMfln8\ng/hoz0M+28gHAJD+obO4LIEls1ePQp7v+nwFeHSD2lUTh8yeKq9vjJjtOXzU\nT9bhM+cAr5woxDTLugt4FFbgIk0qN7gXqyjil4pYFFtLwsfBCGLZa1n0Vac4\nfu6Jm0/WBjiumbcNg4GXqtokfwQfAiQRMEUgPoSs27XRNHhss4u1ykdU8PSH\ntkJ2\r\n=bciw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2LscUJmu/82GjJWc2uJer/E4dgVzxyt3GwWTzcBRa4gIgNGCXJHCaQ2rUsgvRqp7DS46mNePOt3MIOKlXYrBh4lM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.c497962b.0_1620426010819_0.6250119352108061"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.e300688e.0","@material/top-app-bar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-c/QFfHGcZaok9613b6O1lULT0NSNrGeGBoq9+cDh33vyDpUuV8edeZBLQF0fFVWtvhVwBjnn0ibzi1H2BkL9tQ==","shasum":"d6055fb2521877a6fc98357efaadd640fbd3eda2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.e300688e.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb4nCRA9TVsSAnZWagAAhnoP/1a2OEcjZ80lbsbjS+vV\nexvRv6JdNjO0tUg0PKP0eHT8Yq9Fv8K+/YRc0sivpc6LgPiiPKgLSNPRoTK5\nTemdvkMI0IZmZSBnfJfLJiI0Tgk8l5UdZWESDbgzVfDz5QufiGjBkqecLVIc\nrZPg3zv9UYZovLLF1eVOnJ4wu5jFrazxly7DRX330SaQQ4NIhdZwmdO1NMcL\nUF1LBko/WXF7rzUv3eQnZwo1QFSHZcnCIcOtTZn2iJRfC8JnDt0UYj7Yzv5e\nXzuTz+FtdJxRIn+qCfQ4q7hurW++1MVilckvgFJnVQX0JHmqFBC97mffV8RE\nxRjAMCwGZvzsgA7haa+Oz5gKCsLu5QS4qDmPvX/e2k0ZhKXfYOjQvBUdVYnz\nLUy2529e1rAr7Yplq6UXQ+4EJgWwrluf1anpMdcz8wSPpNpXky73ApnYYb8k\nf/7D9OuHeQAqk5zCoQFozePZEn5ZCMsBD/BohBh0HW4Fy8r0mgXbaUZGlZJz\n8jJ4j5PFnMnMIpxaXPiSN6nu5NgQkil25+xRU0mvqznGk6GOGlA4aIlZOEkZ\nDfdlY1TPMUWqN6xH1Wd5c7mWHz+8TmnI/AkzzxrbFXuI6na6bdE7mkmjn0vl\n3jmMOkHzcGFmcyGdOf2Ssq/eIkdmmIeW4tXUwdvd7M1rjZ/1KwMsymoXZ+YC\nobo4\r\n=kwjz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBmZzgcPviZY80zaOmj4wAgWZ0vkJJeXtPGggRn/pBf9AiEAoAw5Qmw7AN2LVNQTDY8v4tFOyRW+urIHbs//INLOw9Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.e300688e.0_1620426279201_0.17395224718614744"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.d70287f2.0","@material/top-app-bar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gtRs4p6mF7HFV9k3Zvh2gKH8raIwCQQmQrQZJ8lUK1q9pJmyaBRXz7CBLsn8qWS6tjTWegDg/WG4e1aDA6MCgQ==","shasum":"b2a053f5dc8a96334858249928b35723cb07b064","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.d70287f2.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYmfCRA9TVsSAnZWagAAKFIP/RxX6tvTbgRdeVnQvebT\njjA/ShDiG/GQ0qOfLdE9iw/+IvigmqatUOji9ND1ZvWJoDnjTuMthRbnM05E\nGCS38UhVyipIfTgN5rrzvBN3hsc/UyDvAadc5XHBE0OzSEf3XGTqiGRUaxPJ\nf2emQNdq+9dx65fnTTPmhQhvyUFcOXun5DOnBG9cGnuxehgGAVKSYmXY+aJY\n+CXxaijFrg8rCRBquFGXBpfHOWevHa4ZpjE3Hx/uyJfbwGAlMon9XOmOLLhH\nuLOlgq5rBFg3cdgX+1M9gRZF0pVtIzrGik3xoVDOWuDfmfUXM2MHkqj1bEsu\n09j7/2VZBZf6v/TqZrxoP6ff0JoQeoouzGni71TAYH1XCxBhh6SWq66q+ZGU\n8MDXxoFOmeOy/jPceiGjRv+w745xZWoF/HsDcRLrucXG1ZsskiS7aPTFHbgn\nRB3Pnton7oEDKJauBGJ9DjPJAFGxvlKmZY6VNWJu1zuIdvgjDfwKp2ZVx/vb\nUjzskcEF98i9pDHDwzVJGU4Wy8Yu5vLXt2MY7Gu/lMiOQrWg7kvWzA3DWzRq\no0VlUFkA1CICIx4PteFmlYdXQCoqTXcYVeh8KCBiwbr00LLzAEWc0xsYal6y\nbLb6qNFcLsJFHiuSASwJiYtEvaTzxkre0zRX7XzdV9UcNxazzlihoYlOPM4z\nTnBD\r\n=aJVh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBIk66APodj9PQO3XJs19N3kxk2GOnEeTr3gHsoRytlXAiB0M8Jf6HSUQfAXn0UDxXrl3vcgnjXNYBqRXPOGc9fzFg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.d70287f2.0_1620674974996_0.44493605854318186"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.02e841b2.0","@material/top-app-bar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vhzvazWur6szWXd5wIZdQUMv5wMj8BBH3JHG4O/pNy0YAQiJl82yDbvyUoP6/MwCTSL7vedDg1iXtG3WgJEj5A==","shasum":"bd93098ac731cc480a9d8382e611d28d8a7ceeba","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.02e841b2.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZjsCRA9TVsSAnZWagAAP/MP/RrN0CtOFNrH4C6epEjr\nV7KqV4eDa8Nnx6A6rg6498i7QpuFO2zwHScWhrGzd7DER6UtulpZ4I61ab+a\nlgn1hCy4Hk3WKq7ds2fwqFePV5oMx31oo6kuRZoHlfc7CetSlWx4FICZk128\n6eYu9sYON1n9nRlc1tVOsPPyeyKy+cPLA3vzIkhIYOgTsOi0XdxJN42yEgf/\ntXFGI4hnVZxa1t31dvt7weHJJ7WDo8phy6+UITopT68DVMmKpQbj9LO2bjo1\nej2kwF8yA5rdWtJ7WuD1uVGrBBFspSxTD/ZBytCNj5qKJQ4GBLZ/0p2Rvest\nBHx30QwIZx9ut1Lga/nYVOIiPkzktcMod8ZGJJs5Wo5cQRHuUaqxymQpnywr\nYOWdjChc4sWxXW61FVbfN9MAUv16fLfUYikQQr7bMrhuq5nVShpO2F3ZcQJk\nVcSZFETVPG29CCkDQVANqWeBBGatsY+JC0GQ5/nh6HJoooctS6QN+an5/5FH\n4RCDZ4NTorJca5xcqNeX3YBLeTMJEywcKsjIMktooSQV5qeVcEbznG+VVZgo\nsvUXBCK8/hTH9gg8mtaRrplHIw1i3mldXsIIeuP9PWKZvYJhFbINrHFziZ7E\nnNWqvSwA5iOTGJy4P5wpWFjYOYPQVoCfbRH1ZMJaXszcpUDuJdIisGAwSrSS\nWOgL\r\n=Jvp2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcND9nvmTFKVLNhIq30jg0n0LvbYX6oSb7tseA3SwL8QIgI0ma/H/oSwJxoAAgWY6a7bsyXL1iLITD8fn42oip5lo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.02e841b2.0_1620678891949_0.5201391732222147"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.badda2f0.0","@material/top-app-bar":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-W9PuqcNDfMILud17pcT0UM21Og4ozMT6ksSHJDdfNFO7kj7/G304p2T7DE18+DmqIOxkR1vZt5VcYHeOPgn3yw==","shasum":"1deacd1ed972fc05c200861b6de6dd52d11e6886","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.badda2f0.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdEvCRA9TVsSAnZWagAAMvEP/iGWehcivCCkcaJ35qIs\nEgVgR4ed2mJcGI40ER0Z9tvjcG5uk8jAqHVR2Ez0F1IOX6Diw6dYvofWcpTl\n4daYCaZB/FsiOM6ZhkD6SOMYrzDilkCvV/+Sk3hG6u8bSQZpQ3iSyb+99asd\nDeDh5UaDgV2sQ1OLdP2+RRAY7iyzZGKvXkRLue/U9xwcsb7IHbrlXmHMTczZ\nbKwmyMEv2DqUu7hEsxFckyklcEgRSw13RjEkGxVaKLja5SUVBJpCWwHHFm3j\nFcFbrHcbQdYIsqL3LJvXurrXMLTGKFedrB0u3i4pcJh5PBpqOAmQcJ1wGYeC\nGzXHs3PH7ND3mjrMZlvQtqS2Xz5jpIuV4qCx6GVmfwB98MFjowj0DEd71MTt\nHVYijtYmOPYbsEo66vMKPHU9arghx8X0S6BDI1jMyQnPTK7dt9DgYhdwaj8t\nnmfDiih0DgidTXdvhrZu23LDCRgQ7omKzOTBa6U0NfCdMfn290tDJVMQMRAa\n+YqqjqbZcjKROyq69a1YnTesmTzWAOo63yl/qE2lYZ9v/WM2Xv7ShQRCnOq0\ni0SX7GUpOA5EgcOeJGQLdsQDnd+USdtpw8yWjNYxUKuI/JMBX5s1gZo7qOvE\nI/dtok/sEXMx3UkzKJ0FjHb2Kq4OzGa9GqLw2DjMxmVfy5oUE+617uBZ0pyL\ncGxB\r\n=0NbB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF6YpUflkdfSrSOzGV0i76krLtpVOt/1VKd+/WjCrV5/AiAJwfBieS09tL/kC4tikTtjvYYi1dBIXpJEc0o6r1rluQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.badda2f0.0_1620693294685_0.6511659976367579"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.004aca62.0","@material/top-app-bar":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0Kj0eJCSfrCPv3zQZlWRBHM/J5hklGEkuvW2VXMcPlA8eGSnHvKbwSniJqOc5CMr624jJz+fFJ358+i3Pqr31A==","shasum":"020691af05c326d9a5be8244db71143fd691e01c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.004aca62.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmseuCRA9TVsSAnZWagAAZKsP/A+KcJ4MuphXQ10ZdYmg\nAIsiQbjG9u9P+B3GnBeSrhRNz4IvhgFey/acUME+P3jpSl3RzfP82dQfH/Kq\nYiHd/GPYjiipoQZV24FkDeiX542vikJ7Bs0tJwjZ9P7Lrf8CQtNMAm1vqDni\nyhkKSdd6UFhJMKuX01wg4Tje/aQSzHRuNj/Vyq4heGvReRsBMzba/PTKMv7I\nwCs9skULYDueKwDtxH1E7ScN5vQkACcYjFjrjycGOGfhgtK4PYWI2zVC84bq\nlE37zYNvy1xVAl00S4R10fb+kWyATpSrqQvddsXendpwhbTtvd/bTv8Osnkz\nw0csDW9ZNjlYmd+z0q+UtiU5uMVLrDA3H/xGho2tDUVBprpbhZDUNG0nTKvD\nfH3Mbr+l7KVMBVVnBr0lz6S9w+Ytxo4JONlmxoZxK3xl8CZB66p4BlCInbRe\n3e6K2FsE4xrugZq93fhPBs4460b0OCP74+VMWJxc9gl/uTGTP76RUUDU0cH3\n5TyAkQeyYvuFZ9AImfTD47+drVF05LWgRldxV7DhnqJR73fdJsVFS/A1+ad8\nUmyUamt1dfqvnfXsW0ArGxlLDWIzsQLJibH+ZGagcFItXebu8DvLuyMAp22x\nbLeM1JCSPY4xng5IlwcL+H0IYJQ1e5lnZAweF9h1g6ZAJG9QEIWpZhSEeh7e\n/aQa\r\n=eSwX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUNm06vh8efR2uZPki6EjaEJNNN7/omPI/38mBbAdRQwIhAL//WVZ73kAYfp6tN8IG1nRA73BVXynDF/gn/RKSxymm"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.004aca62.0_1620756398087_0.9879438708721926"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.4af17446.0","@material/top-app-bar":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/GzBTdpKFg6J/AZFz5K9G3rDSaoGvcDcgxc4x9NXlCi9hySr//f8kTfPQ9rUArEuJYwpH0HMrGByFa3l+Syf2A==","shasum":"3e6e1108ca8dc979d0dde1dd6c821fed3b55f2d3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.4af17446.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtECCRA9TVsSAnZWagAAFMEP/2JlHCE6AGo3df+Msp29\nxfQkm3TPJZu7pWYp+gSdUKsfMTxKVDZrlGTy5+VO06n80tAgKYL04JaljgVm\ngxMh1ni231Fj52uuBepphXGAqrJgUFWildRfhqitAXNYFUB1yZN9ecqxGsx8\np9edH8iyxk1ieNg4pMicCP8aKwa85G6UQVe6baqCH5aMkb++I4hASvwI5pWA\n48HWBccuiWQY89OrTL5uFsk+JNtMknOK6nWEMFDebCIKJTGyWZRH428C1B7U\nTS+XBl84s68WNG93Fnc+I5lF3GKRf46G9K53Mp2z/g2SWCzNuSr7pT4U/b2d\nVo85la+74wsG93kmxGeCM62+hCdGiHcDD+cJAfym6KXlXNtmXIbWmCe6aRFz\nB7zlScCaHEgczAAo7CWfj7eKmaOy4kXbneVRZ1BmZFbvOhaiaH31DA6nnP3M\nFk7yIDVqkDngzNjwrajs0s0ESQr/vm177J6quu05ZkpJECdAR+vppRm5w9U2\nx5iaHQA9GXlht2URmNFmDWK9WthZb9CnQHBMysSR/6WywgDpN4xq0Z2347n1\nV9sZeRfdgU8etSpk3QxZlvlBCgVbkaQ8OwdSUIoh3y/iCihgPzWuliV+JrKf\nw/K6gWAEjCNIeThqXHGvOY1QBk0vZZZ8GmFTJZSf1SI4ceqyQWAklBaNkVap\n69Ac\r\n=OIbU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxL/AQ5p3nEeEi686rnir8LZOwiBWpQYMEm5PlDnLwPwIhAM8UDBEBNxb1HbbdEKi/1atvle0MeQBJ2YbrQ1vWOyYl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.4af17446.0_1620758786326_0.4260241526066022"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.b94d7187.0","@material/top-app-bar":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OFT9Hr3YGXEd/N6jIP7Iriv6q8nDmR525tBw/tHpQ7TxDskl658uO9OebJ6ZeyvXTxh87eX325a78bmr8E7TEQ==","shasum":"edc80494ead722d92153a63af8736642957bff76","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.b94d7187.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtJNCRA9TVsSAnZWagAAdboP/3zCcdCPf6loTU5MZnCt\ny0wM1WAApIXMiGYDRl5kWGCVA1Jtu6wDz9LtNboVfrhXaUlCm7FJajtG3kup\nLf2NBHfjMiiOBK3kaHUy/4sOQYdEBCcnXR0UzP8QwDO/H4jstcOYz1lAOSwV\nsvXpW5AnKx9m6T8b3r5MJplNqAgcRc4Hu+QCgB3XfDbeAk886FRGgMETZTX7\nLdhc+AND6gbrEMzDxFzkXx908cQ1mAiTbdofxfTbmt6+9Z7AO/tJKKmMtO3a\nXniPPRAKPtAqbgYz4mvjOinrBpakShbMNS7tjTliSXTME0pz6o2ru/YR1Yfa\nscIN68wBqcupFpFDtmiNOYvNJQFfbBL3hLWCrtjyRoRc/1FsEvrXlKDgWDTq\nYOyXYrQE0vwq+XNLfAfLUudAx2CdaWIo5yywnqmBZaH54NNRl9qwfdx1I/8S\nK5xOQnGxQOdt8K4wF8SXZXYLhstqwoVx2RYd63dnjLbdBF+agN+CvvBIAVeM\ncIY+cMqbqZ12QtjAkbBh/g9k42jsWZc+QBtN32i6TmwgPIZXxeBOJRg0TD5I\nIJEjTRp5eD5biXOtMY13VTgt9TJt1EU86vFggzzEDqQy/C+EiuSHtHf8iQTb\nXy9oyPCD6aS2l1MkNsAKXthH5CEQEK6rjSEsEsxC4jIZMaTTXmWjSSE3+cNI\nqLkJ\r\n=UALu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICaZ9k6AG09whAkvkN81Vx+hJcmYEBXVU/tJwiDihPERAiEAlc/UxP9GmbQ5Y27/Un/HFP4+eYPJQkqDSFU/IJsa6Ds="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.b94d7187.0_1620759117488_0.8833629695031007"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.4021b2f9.0","@material/top-app-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Pkc4poD2Br8t5FUIaJP93SSgl+f5pB2kvTyTjj3JuNoDOi0/fVof5PQHNTrl2uIxnxIeFYyySMOrz+eGJs6X8g==","shasum":"2bf2dd0db089007145abc107316eb9657e8bc351","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.4021b2f9.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFAXCRA9TVsSAnZWagAATkgP/i68AQ4Z0n6bUWGH60qj\nUqlToIF/YcvifBgyRC2eSSh486Tl3rN9VFDkWgMCpTmjn8rHLZZirS6Unc7x\n+7QfwKog8QDorClQWvN6eK4chjlgChQsRhQS7wRybUBYj4VsnULavN3VH3V7\nRJ6TYqMlpnCi3/y3W4Gp8oCd4OMSRMaf7x3cPTANLEdE9ZPHUtbQP3b73rgv\nyeeKkRKxrCHfyx7qZJYvGU2fncYAspiEMcvK1ejoKCFqSKstxY9vPUfdT3y8\ni/9rax5Bzm3J+7kr7IoKJYnBHP/V9Oin+KitXjHjy/g5oysofAKb3BQw62SR\nuroD2njT//lYSD+QcWFc0kuWuXlnQocV5zSLD5qlV7xbaFQQBe8gWpu3mgwf\n661mB113bSY+cgJE1iil9cH3g+ROJv/m9ka4roRcHknY4fdWq87F9I6ZBvAo\n3JMKe07/ar34/L4FwLTHW4bzcTeAxLqqqzGXlVaJyfV5FA4/j46NWHZha0Pi\nbw1l/JKXDYMCY5a2INAOuyap4AlTpoIAzlIHkmlFzgu/7tDw724dy56A39Wm\noJ/k6JynFngzxTNG85DF67/QwIGCy8fgzoP5K57bmacwfKG3mocmSP59XMlH\nxcbL5ubcHFMe5hj6dCv9BrZsWMskzwlcZAjvwhtYfBH80M4e1ViFGpnWhXNV\nMZ86\r\n=pb7e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDuGhwNmGieJCEUHjOhmWwgjMEeClael2k7DgrLnDBj8AiAtK9sA1yCt50iG2xuxdgFq14fl6knefz2y5SPC6O+VJQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.4021b2f9.0_1620856854651_0.8696561226143493"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.6a5956a3.0","@material/top-app-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JcBUmCsyKFK0zjyF9SVmIIcZe66XhsmoSM07FiWeC7MX4yngD21s13zaQx6UyuKk63Su0gU86pAwd8jHiG7xrA==","shasum":"256b8249cf837d78521e270cbf067fdd44d3f9bc","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.6a5956a3.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFQFCRA9TVsSAnZWagAAfFwQAIhG7V8ADUBv+g9L1DNt\nCGVG22b6ppQnU0oTnUiZ8blMuNA+fZ1Reo6bq9aMI0YK5rQx3n6Leelj8FD+\nzOqCnJgsB6sRFi6DzIEH0vjFpbiwjH/U/KM8QGXIygP4eSEpqVRFjhRFari4\nNVfc6O07GEEAmS3uQxtbFri9mDO+wSkBDbZ4vX3U44rfoLpkf7gfxJzPx6Be\nN6zN8CZjj3HKpHl4PdnqrWWBKSJpk8Wn2bG15xGgu8guGVLyLuomI9UzQp/h\ndsBtpr+YvCieoHnacZeR/+Z/U/pqtky31OAzKgeEKed8FT0Lw7KnRqGSpU1Q\ndZtnBtW19xnZQBgM9/NGgakoeF5aCsI1an13lVQ2iTcn+UCCUQoOEkyDdVUO\nQ0O3iDfrB7d4p3jWQtU939Gax0RE+vs1pmtInScqB7hZwFC4+6jQ+qvYWK/E\njITuFPpG0VKPC7PJiJiq/sjdM26jcxORWCAnCMURe6hkQwJEOx26IdqMRVhA\nxGwGAdVBLHf4rAtFvYkUrf4E0etBq5A1yIzpj0XSGUzqmzCu4ncFczxX3Ol+\nwD09EXpBNLriVUCUgUIkyTNJuSMkhj90oVsiDFTh0QQxY0I0wuQYJFj5NiYu\n5Ew3c1GXJL/TWZ7PeZPI2hoHaSIPkQO3z+IzsTxC4ptwwFBg7+3BFJvLvcr1\nkLuU\r\n=QPmL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDq826JVeMkYN/3y5+fQKNr+zxlDKOJqouWaXkdBkaoxQIhAKHxbpWh3T0Gqgs2WWuWlU3KGJ38lH2zb5DeE0NVD6mw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.6a5956a3.0_1620857861408_0.9580651451155715"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.b6e8a74b.0","@material/top-app-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vu6UgsojYHOP+UNALShCE7iIyobuKymJ4sMLdpXbBKPLoVMIx1htJFuXhV7OwJ6bIIRQh/DH3KQeP9/vZM7U1g==","shasum":"9ea510e35f86e5e1527dcb4f6ee5582385aca14b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.b6e8a74b.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF7NCRA9TVsSAnZWagAAO5AQAKOC/z6wRcolKffekzTs\nmP3I/ceQdONfYh1Wyq3SlsGVzX7QR75LYJjn9HR2iuHXgIT7F0lX2BiF1EbX\n/1fuL9b5EbK9mL1rrJVIi61qAAhR+FgYWj1H6bEoBMiHMx6U5Sr7LSiZppbQ\nPABdXHO/aIb0V4mLck/WVme6gC95Xwm35Qf/slKYiHFhbLnmqx0I55ZlLDbk\nPBKEuzVobWd0sC6Y0t5lcf0iug2y+M9T8gsEIq8ncMtZrxPIsSJXwet2P6XE\nyWVrM0T9GqS37n52DsVmgLimcEzIcQrB7cMF/W5nIj99ePhtqyi1n9CSddoi\nE5dwpL3Z/O7OyAKbpVR1BzljSanAuiBMlDIYztEGZ1GknCJ5D8S1csrjcRQE\ndijL9o1rmEuY2Xv9T2tBEO3/Xg/O3QBfXYJAI4DDo2oWhx/h7A9b24uazxiO\nECexpsat1KfzyQutzSs8QaRpQ0MwRW/yUEQV2gsHswG7mM6ke2WNq9UaDJrJ\nuFlkInugmeB97nDXi7CgJTfUqLT4G4ntncUoRnsotb9xO7pjqWoiUIlXoGqS\nqusnJUzdWZfRKtfXrzk0AV98JrsB7G39tGHq4PVTXpGHpOqoy70KckBajp9H\n+F7trLdOZUCXrXiGdlte8JW33R8RAMN8uoYz/CD4RG5mTDOOms0Ge5vIrWqd\nqtSM\r\n=izJC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0q0fCS2apgFaFdYVSdgXv8pPW6WfcZ3GMP/SCHun3agIgGtPFYqMwVVUuZ6cyb0Jer5DxR/UWtBKfsWMO/FK9nAU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.b6e8a74b.0_1620860621370_0.6499308516518278"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.c94e1030.0","@material/top-app-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-y7PxtLwMczcH40MAp1T2jCmKERq1netBQp9zNA3i51ZNGnMv85Jzl9+JgbffI0zjzQoWngPACquoOvimRN/DBg==","shasum":"cadaf3d707801e0290a6413c3133c1574f0d453a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.c94e1030.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGArCRA9TVsSAnZWagAAWeMQAJmvcHDgyGZzNjU1/+HK\n7zKvdp/tvHHJqrgnQ/ai/1I4pj+TV1YfeVBG+T64SFdAYcSJHuuNUle9SrQw\n+DPHjEi6T/FxR1Eew/u237eDonaiWzteyy5qIfXMKUAPC4wdmIAbJUcWWMuH\n+fXPf7jlREG9guZW2EljG7oPtU8XQuJQfDUet6glrFEQK6ebOsCazORl5o9P\nd/bS9B+HCLotd7Az8vgzxkNXqbrRGlmdOFvaCJE122G+DlL5sXQX8bt34Zce\n4GhjtiYhOPKX6H/EZuqo331CCFUdQIgIDCE22TrKn8m8GnVDYUJUAWdHN3sS\nLAN1rFClfjYen9pIdKfc5/GMnUsYR9GFJbl0haXGquvqNfSvRMRx9Ec0/7+T\n6nnv813RXgQvEUXANoUndgFXMDjOu9d2p1Xe2LWG0xh3LNUyZxna1ExzXHe8\n2DMQsGHzX2rtyBie3+ttpq3Rn39dJibJvzMWWwCfZzXl1PyQxw5PUyZN+cDW\nZqYxuzJrTeLeIT8chN6x8uhDzeogsfMNuZMUAgPBy8Rv0ODMoCuYsfOos7qU\nP797nFS2mpVZB511RAw+KacWQbnGL141RVGffonRLeS5muGE7krE4AWaVrA/\nrNDiHtlR/QjfFUcRXu16ZiOw+4QfZqEPg/pU2yjjKrOyXcChOVfitUdVYNuF\nAfZZ\r\n=izJf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5tjGgxSRfW1/bjQNMl6Zs+MxSp2DDDNWP5QgIZrleRgIhANx3R6x5P7oacvU037/SQdErnjNvHjqGgc8bwNMzyGHy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.c94e1030.0_1620860971274_0.7011861934788752"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.40a34e35.0","@material/top-app-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I0p1Ddge8huLKiwWN0eZs0cRtjpnXMD/Kig4tGMbmJSFIlKeGfS0IRx3Kv3l+w62aALM8M8uniZp1S/VvA8Ntg==","shasum":"f5ffe6b3c91f76ad2337bedadd07205caa6c40ba","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.40a34e35.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGuxCRA9TVsSAnZWagAA3xYP/0rd1+il9KdcBqh4ms5q\ng9JdbOMD5bwVOcIQFt9m00kFS4lTtR7fcHLjniNW1pj84WftV8gv8NkOma9n\nsHXeFSS+jditONAj5zpYPMAVQI13Wvs1n13njQ+X5JaxhGv4iaApKjfJxvQm\n7XHoW8BjkvpgnLdIIKCmVztG1Hglef3QlaSSxYrlrVLtliQre7rw4+iV0WoP\nomobsWd26JIoJfcG/DhbPuRCXHGrEko0HJL3XrHDDhxnw/mzvfsQgETGvvMN\n4XHEeb2tkPPbApiiXAMKAXvARjFJQcZYARqF74NQaXRgrjurVWcVyfVV329x\nEIT4hLjelscJs7iJFfwlWWB+VVO17LA0AquNFMT3RUEPCRxVSfC1sMtDNaWO\nNFdWNZEAYYF2tde3R1tpXA2K59vr9IKpL7i6UhsI5y84WgK4wx2qDfbQO8u5\n68Rk92Szn33d0+bpBqf4LHms8xi0y80d80Q+xU6yPRc17jEyYLTbKYfSkuvG\nQVLXwe5QGaHRBMIatTYGAdAdOJu2Stzt24pZJH8gzwRPMF+5UdWs09Tbrwfk\n+XoAntGZxqxWksDWkx55CE6Hsey3LhgW7TnzQkjK2gKG7Bm32UX8FAyRObOj\nd+71BFfh+57/mnMUI7iapMfQFkz7CA1m+OPUOatrsix8ZqK4+CKh/bfi1eCa\nl8N4\r\n=QVID\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICnjgPSxHIQAIxUjXO05cXhyQfvBpu01W15pdCLUppedAiEAmfcykSoE4vouANIi5StWuZkOxK/i3Smb7DWsWPInEu0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.40a34e35.0_1620863921297_0.7104996880016159"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.1be14d2c.0","@material/top-app-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-OCs2P4BUwhw1afeOCSq+03qp7Ip/pT7Fo2X1W98JjK/5m9/8cr+yDPg+EoVMNtNGKN1ouIgZV2twygzRJOG79A==","shasum":"802c612a20808cc876784de418a5e19f999fddbd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.1be14d2c.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWbWCRA9TVsSAnZWagAAV3AP/jwsCyQTC3xLZEsi6iHX\n1PElnHWTAwyxPf+VSW9LxdDNU7Qbtvg4rgEntErpz2/AcOdAAqhyyEnYoBrb\nxwJP6ObIIepjbfP9G3HAMghROSiLMuQMd9Hy5q1xcClTSsiajq5Nue0FpTX/\nNjyCMbEda1oyY8j9ou6iH3HAbevClNMTTUor4DFEkBpg8nFMwveuFC1j+kS7\nUgwUIxHW8oP7bmbyZPaChPt4adwpcudbd8JMFYUC/aBvyKKhJbJXymUgQtjY\nSdsM9HEjalzdtVgGbz5nAGnXloptk3t08e7It/hrss1Nb7EW1L/sFgQFyBRj\nUHxQ6pXHIWU5//0Y5Ac6oW37rUWfVyb3S8QRZRpm/gMeucMWacdGOC5CEGtH\nOtCDJab7TzYjUUpta74ElWnLLlrijuLlGXvnvMyb3rM3Y8RsstOC+zQrVQL1\nCAxEb5htBrMEHUUJJvn6ux4X8xeOONEaQFgkvqOFGC7x5ZudDjv8Z/+JUcdP\ny2EeB94mhuhQgwGzHRNvo2W8puq6M5S2m65E7yUXnGh7OSGoeQvVknc3iJKc\nl/GH34DiNGuHFJbNksRDBI2z120ENg+lsxeswaLA1Dene4OvHWZFtoJ9AfFS\ncaFXOlymFt9qEzX8PzoSCSx8Yelr8FhtxEasuxCPWEGVRWa0scP6IYXpPk+g\n1sYe\r\n=9ltj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAUz81q2yPGhhiwydfDZJ1gSMejfqAgF/P2T6aC50KBYAiAoIl4ZQBDbh6NOddrR7HDLV0dqqNzMH0PDNeHl1SHTNQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.1be14d2c.0_1620928214082_0.6877308583520882"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.87dbd64f.0","@material/top-app-bar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fguCL6Lv5kPPuqOPlwRNvlM32V7gMFGQgrXs+ulcoY0jc9eF73C1uFe1Vh7k9wjIuCo6nJ6c7Mei8jajua2ZpQ==","shasum":"ff565ef71d433603c7338ce79e26f392650008f9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.87dbd64f.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuSGCRA9TVsSAnZWagAARP0P/2fbJQVa589/2WPVhl++\n2TLRZFikkqkKG697rRjTuzYBqWBs55+r5gbhNVlUf6SQrejpfa06/cpdzolh\nY4TpQShvclFkgNtgL7MxiqgZtw/8xifiNrsFwW8F5Y9JxvTZDVfKcAFPRKEi\nfAYRyIt4d9VYpp528vBnTqH0SrQNS/trQo2/gF2ihzzoaIfclU2QaAWiyblj\nsag/HmnyBZnTtKVallVe4eWfku6vqL9WdnRRcWKW99MxOBGaMomZsofDmCKY\neBmUL/852kqimzganvk4/NYEv7IEzrP/YM+WWN65hQqjkiPK0OLskPbwSEVC\naG4xGY9zfgvTpgyM/74u5uRbsnUl3j/u9mTrnfZfing8oVUOIrBvoA3RYpnJ\n/qt4ngoO5F1uaKb9otAyxFS2FHY+fB5dR0XWoVw8YYAbhZRVEYSNV1lrfRM1\nLfyRnsz8IOjZOMpF85xDcQVNIZjrEuSLksQ1kTubRdOmjUmg6eQzYINAgJa+\nPE7q3dOtaqe+jqepW/+sp3sbRdq67ygPC7o3mqNIf63R2EKbEhrFp87mJWcb\nL00u4bALNqCDhnEIF0qWvdYbe0agKkuv2WYx00UskkYuRa0Afee6kepLwFD/\ntcJt+dXv9mSMjoxD/s76xu2g438f4pq+4BuTNWKqxFnWvYj17T1Nl8O4aggE\nv4nx\r\n=4YlA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCn+FjBwbwdJpwk5CkhdYrDMcNBPg1U2SswDyONHPxzTgIhAMU9D10OAEeizxIRLxro9SUcsAfbdtvp0iMWgDips8jz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.87dbd64f.0_1621025926460_0.3147947215265239"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.c452e4da.0","@material/top-app-bar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mlrz7Y1edVawi/ApxbW933WoQXe0bYS6O0Y/kGylr8LYQOphNtaLdcuxItVZMBpUwp5FrLoxYkAGXXWnHgo4rw==","shasum":"dd21c7072838905d4b669f7621139fd4411123b9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.c452e4da.0.tgz","fileCount":9,"unpackedSize":27364,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgov0FCRA9TVsSAnZWagAA6E4P/Ruwwslu/TREhkabf50r\nTTsN6SnGuLkxOQK1jeLzF71dY7CmW1yXWGFe5JXOkgXcYs607zr3Z+HPrRzz\nttjKhBXk40IfMTr7+cwlKygZsOxTtSLMqgMKo/W6Zrk2JVCLrf06vQt3a85q\nAdsqL1u/HmPB6Mi02mMpZO/X2OxOu7zCYxgDhGoWAG3VgTJEljB4yxChkYmA\n+2CGFYtdpUl2X2OTKN4W9zCPktehsVys9FaNHRCGSZbT58A/VL8GGP4J/uNE\n6PUGrNMvJscs9iULNQlwSVAw9vrXWcOmHw9tcixuBYRHUHYx7ONC2fxh0CVF\nEV1RrL157Sh4ILdGZRFQuOEt85j+1NlgIYLTBsL0fJjP/OCzh77x0XMddKi/\nY7ljEY08HYh2+EaAX4xIfDgv/sMGvvJcbiyv1UdQWCX5hiBf8h8m/wPqcJWG\nsQQUDeqKm2UIcLdaeQNuT0QX7HlAlineGTaQ3npr1CdNzRCzlYL3WsLOIJE6\n0cU95JL/Uh2y/YKgdFNLNgc7hcAfpF4pC9Lw5s8PcZAYUnfainvDRaxi758z\n+FJLvY0RciHLQNzQoBz5/OQxHfmzuqYYyAV1xdkU4HywKd16m178pC8nCPMo\nZB5qN5fSX9m6nFhBtRNrS+Z3zrnmF2tQM3TP3Zn/Z0pvOo9DpeLbnKd0mPyV\n65Eu\r\n=kHb+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPXTgQbrhl5Mv5sqwIi7Lpw+rS8pk8Smt7RN3FpbZocAIhAL86sfQoS8HZl623bthV0zLQIPCM3V5nubH008Yj1nfo"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.c452e4da.0_1621294341509_0.21124420767656615"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.2212691a.0","@material/top-app-bar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-12oInK3L1ay5DKO9IYjjq9DiJQtz/FkjSDXjJaDt6BGdECzn0hkE1xl+fVsg4ojpymYLJKMJr5Saq+hxcJCNkw==","shasum":"f6c176cbc030c4b067a20a192e096c853c300dc6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.2212691a.0.tgz","fileCount":9,"unpackedSize":24807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowHaCRA9TVsSAnZWagAACogQAKG8dfuvjzD5VOWktid2\nnjQVLYmd92PJ6PzVIkgKbmrUm595+QCw60fEEb6EvdiYKOR2V/Xhs0H14Uav\nl8poftPZSOu127fMuKzPk3gNO5bU24WYaOfFm1kAQHpB9qkxvKqZfw8bb724\nU54RNGqsIrDDA8IUqW0sQ0gGlH8UlhRjb201rCohz77aadSiYVOmUuXVCzrP\neAGbphoJGF8ha83hYlaKyIvcFFxSt4rqs0FBYcXFTKHqFfRn8vndGQj/5Qfs\niG4/N3jhXxj+2hnirZtiFpgMhn2bUqjQFb7FC8zwKEgxWePbkkvqZGL8Y+Nm\nXQ/J2ZQBzCrou5PFpVm4MfhmIn5QhkxbmHAfrJLzgHOOTYNU0Iysd9K511IC\nstwlum5vBKmRRAidowoLND/5oeTpto7I5Y4bUvRCauv9VTG+RV1ku1XtyxvK\nyegl/fpNCW4hgVo4qD7CkDHiooxRqwoBXlL6ycBvCac9AmtQedonHIdDpnA5\n4Oknt7a4GUkVL473DeHGABB3euPwwX7D2M0u5EQwsKUCTPcPyTcomiBxzdr2\n+ljvz2UIEYKob1D/AXVxkWqbtxvlr9ciL/zmHNCD5wBzZC6eMXSvD8szryHt\nP7tcApv2kkqGZynYoYgPc3NkPUIY5XtVQdv/P0qYNU+0lQf9BF93SZ8zjI3P\nR0Of\r\n=d4fD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCzrVugyI9sHGrHYI7YyKmMFIJoDXNeL7xiO78oqSH6bAIgJ+qIhxHxLqlEgKd4HOpn9xsLdAwLwchQjUY8gP9hAAg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.2212691a.0_1621295578172_0.4710072986199856"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.f748ff2f.0","@material/top-app-bar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+GnJeILKUZwqLNyw4AgTqEiQ28jRp152kKGQLdgbVx1Mof4hZHAek7ieozdtMbLRLjCxAj9RgW5g73Ksjv3waA==","shasum":"0a44ba67bf5a1c40d982573df727a5536acdbd53","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.f748ff2f.0.tgz","fileCount":9,"unpackedSize":24811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowjcCRA9TVsSAnZWagAALowQAJHoZ67ZKD2/FSjTR9BQ\nC0sNaA+s60Z4IBACmMbGtxMdUU6LbL8hObGQkTOqyRkXAC9+uG2evMSRg0xF\nkmoEvQG/B29reaO8l1Pwvj/3xO7BE4etIZ1JZI+aHe37ZUvoJiNhzfDKT4k6\n774sHXlj8skZNTf/nT91hhXckrWfxBWlnLw9Q33r6w35LT6Xu++fZpuA/clK\nbmFN4lCFkV2ONHWAO9bdgaTHfKlhiafpcJHX1LTp8ex79GgoMHc4XUd61cGS\npHX3LPIRwFy9RptRCeQJjOdgJ3vKlPheA90bOao98HiOY51pvPQh/sgwYjEL\nrm0rr1IiOVy5Evqk2nUzPA9Ay8J1ugHgf0YSPOT9jJWP05QMEA/09uN+pKOj\n2kYz6iGQbjxpwGce+sj9BQ3kt9a88Pray32EVsbthkeNzxHdNL94SwNiaQZl\nLC/Hb7CP0nxv8AAUmFsfA/xJ9pfJf4jkcRryV61DteNVU2mU7ePj2rHnesGV\nYnAZCCPWG5cCr9BNkY6OPVyAtgaMkOBatvlql0mqRU+UFmO8cs/5lkB5gqSF\nxQ69yeHGZlRcpiIqhnzyH7sGNQiqmTIA2sjmvDngO4x0VTvwMO0TuBexYwdT\nt4QbY2iI4x1Fk3XYEScnCJ2Dy4GD+MgnMLmTZe+Wb8YmTupvCyfir7BcbRI3\nq11L\r\n=Vo65\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDovDwZvSZ8IPdjnxw2MVyGaeoXzaGBozzsAc8i4iVyTQIhAJd9ekEF7UIAt3Vmsm5Uc3ZGCn11A5Ap8clAEq2NXkV6"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.f748ff2f.0_1621297371761_0.532629611415312"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.cc04657a.0","@material/top-app-bar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fpzzNGKEShTbsoPbyYfJMpGpSGcDNSQIDcyA8W707Ka8ZnlQqj1RxSShBaF3DxK/WMDE54o6JMj+wSNUG3ZM1A==","shasum":"1b1e5c89de21af421b80ffeaedce03fbdd3c0ca3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.cc04657a.0.tgz","fileCount":9,"unpackedSize":24811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxaOCRA9TVsSAnZWagAAy14P/RUNwZ3J3GdlEktQfdl0\nftf75oE8B0kQKaCuZ3+uPvwvXgpyeUGkiQ03hyIAOtZbrVttFJP2lgFukHhW\nK1BSojfcXfK48JvY2aaOJTsyT98zzoQeucSUkT7FFVE9ABk/Pxi18rukBB/J\nI29RXyenn3m3rfnTy7pRfJ2Qb1Egg0aMbYe+qSy0J/dfujJgV1cIOiQeuxAE\n1LWao4epabMRfiEPwXAIddl1YbB0Mcff9PLj3Ani6zog5l/JGEUgCEzExgMF\nflx2D3WTdckfYbrYKCfRJVT3ENO8vJvpZUIRrv645ClCouxHKSMiaIS8C1j0\nCml6PCfVIfljJb2w5+V7aQHmhnzmghxy8pULvqEJGiEtowagymWpuFbKCwlw\nvNiHBkHYKHsoDR7ao6Mk5LfMhYuaA/IsVPs83s1HHnJ7//Qq33cwL9F1rukW\ngt6yWatgNgPDyNmdgWntIOHY/8yYLKdDsBbvyShRb/3VPmjtWrb5AB2P3Lgg\nxPbOvJc9pKAjc0Ye2yQhQnD3284Uka6p5sBPcxbpLCJ3FRulYnDlgiEzn9C4\nbjrlOi2/YgeLnmOl8gjELwSCv8kN/qzX2yYDbKnqRuYwnLmuGuRM3iaDmG2E\nwPPkACwh5Gw0Ndw7JLWvBLlDdvgu5MfPW1rtmKm3fQQvFWOW7Ic/dkGn5DQR\nreNn\r\n=UaOq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCD4Qx+Gew02SD2sYeVWW8YH618bq0KXqpXeOZd39fiowIgfSiFXMG2YMpcYjxc1m0pK/X2uhzxtSqfj3RwooKFrvM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.cc04657a.0_1621300877704_0.8022184653545599"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.3a3114fa.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IO8M+WAiYB2EeWCnBPEcPPYeSzgwuIIajDB8dxGEE+evCEWUBGFrrYBuS/1K14Ngd/v8B3pzA1s48FxIFoEXBQ==","shasum":"56d9adc60b33c05b72728cf073abaa3b511f4cf0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.3a3114fa.0.tgz","fileCount":9,"unpackedSize":24811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaHxCRA9TVsSAnZWagAAQyUP/Ak/93Jnuxx4SIjpltdN\nDGpYiM1zaIRSUiZGSZMxa1BVgv3bl8t9yb6fqeB06Rd6SRRbdlnvnvOPT3Bq\npOeCtMS0aCHjUmYHGpjuZUORPqpP1Ox7mn7GkvMWIZHQWd/ms1yA6Zr2lu0d\n7r1tl3TFcUp8sO2n285S+Yx4CO9LUudnVjmQgtbppNoGMNsHJ+tcGmCkhIeY\nIYlVkE1vTM94hPBrEdP41WHwUF2bUCRtzsG+eb2Sv6vidvEYvYjMzJSpZmVH\njOfBjM5o5yWKaL0+BuvsXW9yzhsdxnsViVyhaDCBbHtUSkgC3n3Ux3RQ3dEk\nWcYwE5QpBXRETMdG+7W/eTvd8+Lmf/igXuVbjd0cpqc8QNiIWVLe6HGauoU/\ngxLPdezx1S7aSTeaVgRf3DtbqK9HxD94tE5RTyyI2HkR9KzEBA9Zf4YwvQWC\n0uplDj1kHFfDNJf//tF/jqJaj7Jcb4bNCa/v4bZnk8S86ASLcWjaEIOQ3ASp\nFzHcufLc8LmyWAs9gbzG1sXWynHMcu6yk+Hso2OEXfyoN8AN5fU5bL3oCB34\nYBJSH7NZdCRIVvaVCfiU4Dpel6qrahOVlQ/iwtM9aJ8pO+qGRFtKjuCRqvsq\nU33Dk1sv0WfxfGlVlGXQbFL/oOHPANBgMN6OtwBWDHbKvrXxm77dnT0R58AI\nxy7L\r\n=Ug10\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAaG6YZ7FzT2aHn8gOrpL2140FI5wkvfeXrqnn6iBttwAiEApEQdJyBKmozPTCZTY0JI7NwDvApJYhUnxuu3tUiDVCs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.3a3114fa.0_1621467632823_0.6430395117133021"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.b46bdf83.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Z4z2zutmlQ3M3koPDmSArIXBBxJFzUtPuMfOmc+FGCgWBTezvsXp+rhzzzboZAc9j2396hhbvFK0dU5m0mYh5Q==","shasum":"854dbd33f0307f7ef8419f1d6d93bdce52dd0e69","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.b46bdf83.0.tgz","fileCount":9,"unpackedSize":24811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcCYCRA9TVsSAnZWagAA/OAQAJpdZCqbIUoXeK+bRQiI\nmxMVk7hgfhHGx3Egg9jSxpaNJxNQkGJQ8WVHyGKEXeO4ynCs2TU3jE065tiT\nNeX9VL8uvlaqrmFaMc31+KHubUtR2ywEfJsspZxcfXHUpJ3O/OT3MTvak5Bk\n63AMStpEe95bAHpc2OPNFXm3WW7JXvDjX9tlWQB7yzxdOf54atgkjaF0kbDj\nVR2YHZva8OSGrIzZKL7TWIbxtQHEuhyUaPTh6giAzet+23ra/20yjdSm46SV\n3zsxNWuJIUNl5wBb0lJMFHN0Bg5wG29SE+dea8z/l7zkTsYGIWyFJ59WX//P\nHzEIa3onLd4JTjIX+LIQTYm7HqiXmrFqHs4d4nhb4PCJ+XroHNhc+Kx7mbeB\nzZF4qLIMkZkZWIft6u/z3OuY6OBBF/H7Xd0CI+/PY41HlwzgABZos9dVOE5G\njEGAB0ajs+a8CSRM4g+CwPRLjZf+5b2Z/T3Oqczezd8CLrfUsSE6MVnAfmxh\nwEIIw8oEP1ew1rwOQjxcblGXyGP3XAGJVJFjWls6TetjtraSdcXfdjj9K1Nv\nqQP+EFFAHTJfPwrd4LTgA5qg5Bttk2Q94WE+0u9PQFVj+ULiOEel9dfQNGVc\nNNDNbmpzrazPgYQQ5uJrxPIGToapIyir4cK7KH8/YArGXheOsgDNclCSfOTv\n1hqc\r\n=hWwt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBz7kGCPGoI1iLccitTHmPjTjV0OaPQiO8lHUB/QJU2cAiEAsZqCNn32ibGoDuqnAQGRFpLQctVjyPWGxv9u1FTx4gk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.b46bdf83.0_1621475480522_0.11020357584447704"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.b401a081.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-S+nbuqwlz+SmGMMmP2TgMN4huX8i0p+w83OikvbGlJU4kcp7rwkYn9XsDKFJVC151OBfJFkApGfMUiyn3um9cQ==","shasum":"fa706491d68645cc06e361331c6f9e1211564f16","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.b401a081.0.tgz","fileCount":9,"unpackedSize":24811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqEDqCRA9TVsSAnZWagAATj0P/iIZns56tEH0PC8RyXt0\nTBJueVPBIOCmJbbwpxA5LbgTuQqtWnOAYCWDMFmZm0K0tnm+ofJ4yETofd+g\nuiQ/rZc8EUJeuX1L33ypDEtRgP2TqRguwJ81fzKi6a1x+gbgEHiy07Tv4No1\nEcHVNosGYIIR6wB1Nq9AAyc/tpcJbVbsWQ1rGQ6mSf5ZkkJeTQsE19IKzzcc\nX5X6TePXNgDwfBBT2NBt0wGPWuIt5sjW7e2XzwtwwPEvEbd+9PFoik+1BxZm\nsIVenN+imyB62QBYuYQ9gzM3i4I4frE4nMxiUQaHXMU2qpuUUbpbO3RZLF4h\nEIqq8hBnhj90tHs/3fSmfX3NAFjkgQW0YAPVzBkIo+WY7tq+xY+Wx8FBmtKr\nyZ3YDI0vRhAlhfvxN/fRizdUOexhIZy7Qqusu23a/jo8oKM4bWyATtXVfvfO\niQzRoZw6EmKcRPjhSRokY9Fg6LhQso2bgHJ/Zly50SkSGT4E2ZI+EajdWC+X\n7QvLVaKmpDZVDl5b0L92krqYLEwcWStx95LV8y8xn3tqQFaQpM0y1esOyXdz\nqQW8jucFYXgKCRhCTQygr0+7R0XGY9ohDZA+zJrnwnO/sE6O1twMSsezpFSz\nasphfbpQZyng0spw8EARiLFv7N9BPb2wrVwjipnsLW/BFCtUxVJ4EN7rcYxx\nb53s\r\n=koKx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHZQB3EeaBMMbYegpFTiAjPydhIFU2rCiSCvcLhl4vJTAiEAr0UHbKv3/9d3PVNDNkauQwBZI3WpnvvOWPxngMJs5BU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.b401a081.0_1621639402356_0.6993977043777582"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.012c8dc0.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kOJIdBlH2X7j6TePedBX40X0/MzQ+RKDNsxaXB97vMq2qe0UIloHhXgSkr0ZRTJ9qTYrSvIbvRFqHVQZuJ2SbA==","shasum":"1b29f27e33499278dc98d53145aeef05850c038a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.012c8dc0.0.tgz","fileCount":9,"unpackedSize":24811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE1tCRA9TVsSAnZWagAAhNgP/A7uoW01yraDUI9pMyT+\nMpAgIA82a7kvqXa8dxb2jHvbSc/Beo95MGHjONdNBDGHavHqWoynZ+1ffcP5\nJJlvto48Lv4wArZOF/kS0i8xBaIU4LG9E+9XJ9Dw2vX/TZocmwRvht6dBoD5\nk8RPZfa7CPMvd5qmRti66ARcu9Q+N8LQHuqgPrERsvC6iICFgaf3SeoR9Mcq\nDYqtOv+vTXeOJxS/ybhQTfw/JlA/aY7Yv9+1Yiyh/ksg1cGdzNHOOru0PLQY\nWX4r+8loaanyXATnS7UltovqWRVk3T035XJGoHyyJoGZcstJN1P/nXuaYyHN\n6qZS8ro9MbfN8Dflonu6/pKhUujelZKphreij2c7z6F6p0ajtMgbS2+bnhZu\nMqQz2ximuTuocFDATNGlNh5E3Qn0dqtZrNKjwmWe1syebWaUGqOev2RQ46aw\naTvglddU8cXbzpEt8E+lugq4P5oDz7kp0BIrU8MZvkYpRvOMZKOns1qV3nDs\nsITd4M+5684Sisw2yrz+t8obm9e9TTzwucuViSkthmvirp/QC1QFVeOfZpsw\nFa27c7iRKApF35YbZWbTCkcHUhgFkD04S/IPZuAqabgIxRsW/5KYIE0dDYcN\nZa7apDqJc2NQnpmBTRGS2L67fFKIAC/9R0pF5Q+ycaL06XBQvrTZvCmZBXVm\nSKH8\r\n=7dNS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICh9K8L2nyGs7vPwA8PpqeLVSx+TT6EXHjzRNz4fVPbDAiEAr6CtLctFWqOSBcGmopcLaEu7tWPZ26tMZCUxeUhUZFU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.012c8dc0.0_1621642605522_0.13919814434057654"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.e01a1731.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zrbbbq0HwUT38zWwR7eVSFxDcg/tSKi9PX03I1R/iEe39kQ2nQ4Zv96USUq3Vw29QAdT9lVxjIYF9tQqfitVtg==","shasum":"d153087d3a3f76227e2192cb626a5beaab1529aa","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.e01a1731.0.tgz","fileCount":9,"unpackedSize":24811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq847CRA9TVsSAnZWagAA4gcP+gOGfBTxo1IOlATSjsGq\n9yquID4W0tvC76S1RnTF2weF5g4ZsktgBxym+kia1OHb8RA/P+sbhaaRqafz\n5KzTYgkU3uVr6aDfbS8A2jOrod792bJonqcKemZRbNfeLGOuKF5pb/YuDcRj\noLrKik1HgvmhnHFlE0E/Btc9v+yRyQMrA94kPkdX14vCfh+lM8elx3uhYQPJ\nawzs28tBDdBH5cSNzS3jaYk9BuomWOd1e4lsE1Tuc4O6uRH6lG5YV9+w4APm\netO1jT2XLd/rX6zOoZkJjTxzy/9hDm1rlx/vrWS7XDHuECB00aASwlyKteKb\nP+kwZdwV74Pkc5mpsgtuvXRAewM9jTr0BpBAfnxgMgX71zQh/w9Bzcsupy3U\nN4iRGnD1Feo8j+keEtmrVd6/vYlW/ZFlDQ7Ak4icqbbTOBGNeirnAJw1btGZ\nDyZsikiZdZnxIZlaoYx0I2LPr8LpDHyHrNke7r3Pcw+3X0dxHfvQZqEDF/pd\nB+3KljJKWafP2ZbZwMVKw1FtlJJwjYuGatXrfgxMXQ6rz/AkX/yqaRqfLlOv\nPeXCvFm3P7cwXpOA6D/uqIRYnlSKA/L5rGb/R8Fk1GgT6eKC1MIpR8VQlFFD\nQo1FlCDjpiYMRnOi3hJ3ptfSv57v25Gc4mrBJ32Mp/JVQA4D4QdhWH16mjwg\nsdGM\r\n=V8aU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICCi/P1faIpqErgabl6RU67fP7x6fkIC12P2TSazt1m+AiEAi6gykVavqrgIpsX0kkLynHRsEWrO+scY0OhKm52/AU8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.e01a1731.0_1621872187350_0.10363533335121389"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.59174b9f.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-N5wbSx0qVkoKIvjmoxwyyMvIdXQg5QBXbsD9tyN/Go0pYEUvRqSESsl55GzlQVNqLNQGkagJr6njTug1l8+s+Q==","shasum":"e4cc1f5d813f06ce277717458f613deb2d2e4b66","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.59174b9f.0.tgz","fileCount":9,"unpackedSize":24811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTu/CRA9TVsSAnZWagAAT9UP/RbgyPLV+q5V+XMoZhmb\nB+aQHi+/NsQI2jI6YVAXx+Ve2qj6u9cuzCzjLHuvNkEwoC0KmMn+CVaJG6AX\nQLoCgbv77hUA9VK4Bifzk0tfIobShfiZ3NAazZoEUABwxM3xSwAhkTpHb/Rx\nYzcOnD9VTpiyg0EykhQ6oSXaALumbVyDa+AdEfXyRGIBIqg7sXA+sZao5aen\nFKFDP/kWqC0E6psGrhD51W7nfT2ZKkjB1z0eCerzNTWTZdhX85igVv/qFEp3\nVjb/wNcXbzjLC+YFazVWE4hGR7ZsE4Ej8sCHKIfYW6Cfv1IZCRToCs1vpXff\ndshvYhBRXhgUc6jDsd4qsFeY2UopMDnuU4r8+qSNlbCEmfwxx3EavRfklEld\ntyRQiih13rzu0xW031TfnetVIipND42XRvbIjWsCkXRrTYy1vfvsMs0vqJCL\nnzrtxxJN4PZKkh2uwGeyAEwYvCu2XZbsscK/SlPhRLZkgiCyHGzsbt+3MBWx\nMVCS4IM1KdL831uiJQ5xGIScBn1rN5HYP8TEBEQc49byZiOnbaxxM8+3IJLU\n8Bi0nWnmkH6gUvwZ4JimBMjtZWrVo12hwn1aDJsNQ6GuNhiloDTNiREyWKuK\na9wXscQVHH1Qgnlc5GhkTCO340QMu9YZLPjaEwgxK4vSmTaZPKalW4RKkyKp\niWjU\r\n=jIlc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHq8R9+aMhDkF8izcnzc64+ZjVjOndUQ9kIEgGnWOJGAAiB7nY015zaOPat8IC4RLN0HrMg9IumUfy82i5TXXag9dA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.59174b9f.0_1621965758676_0.3187725113282589"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.c96cb2e0.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3d1qUIft7wb8QcecwxS+DUIhhKAXrK1WAGL39IhcKEp7dMMyWOv6cC8FuSBmR3bJVyP0zQB47Ol+ajjG5uy3fg==","shasum":"bd8bcedca2a4064e973d6e3e508df736f583edc5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.c96cb2e0.0.tgz","fileCount":9,"unpackedSize":24811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUwnCRA9TVsSAnZWagAAG1MP/0aLJ7iYzKCIA1FM1DWW\nPqnzvNUjkqRxz9+NREB5rLjC0nj3iHNR4i4FBMUDXLOcpk4YWxFWwVCOC2NE\n41oxNJSFybP/FcVOi8C0hPvEDV3YB1RBhbfpdiM/AAT7jiZ3sjtyX03dArFk\nm2JyG70eWNrUt8vRCGQIWLO4HfdK3ROrOSsq8JYPEB7n7E7hp3f0t67cqQ8c\npYgAQkSSyn+ms94a1kT+1s/UNhne+YBJ+sYmP+U6y/JKJ8F9zJlAO6YZSwCU\nAGNiGn/+1UwVyXc3zRfVHSqe+7V5TXO4McFTgMHsxYdYb7P96AXegvl8fMZA\npPYSIjBPKeRDYqCBC6ny54seirnPo1Lku5xjXCV6mOA/MpUi+JPqnjztKC2r\nFhaN8LcPvI2ore5n1YsoHCK09RkEig30l3tuF1POtU6z3uKKwQ7ZRU84K6X7\npFB6ksg/fBKh1pxqbib+jPxIErNcCJFmcZwen+3fpTi5uTNQYVeTl0Z2lfkE\nZafrpL5yMMxcpyPvP2hbVs6Ef3KMRre3Pf2gCfT84gGTx5WSBz1dLxFLhyiq\nMPegg55BtemrDPFk4OzEwRckYtFyc4pEfdB+9R8rgGwbNfUH6wI5Ue6d53XL\nksXs6sN3sP21dfKSK32D3JJd2w1yCj/MzrFN1w0ch2B15fKIEELXSGgs77SR\nuO+g\r\n=gRb2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE0a8x52l5/m3ryw5E1t0IYjL6qFDOQBX2eKVIRK1K0TAiA4cklirhDLw5BIjZh/a3cRtuyrv5KojMHXSxz9rPFtNQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.c96cb2e0.0_1621969959537_0.3370455612973213"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.b9b0e330.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7bfZXso5OVkDLJXPKj9y7BMUunIgmAMnEWkPEgj9yQPoprwB6aMHuQF8gCghfiofNNmsn3+hpG+mSKu2CIlF6g==","shasum":"cc20b6bb4ceb35028d46a8ca4269bc31a147523d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.b9b0e330.0.tgz","fileCount":9,"unpackedSize":24811,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWV9CRA9TVsSAnZWagAAhfMP/iodYL3ErVrET3t4xBDL\nvHo4eA/9oAlV6RNfafuTcZnFsLBAURFh0pba8KHVv8DUHTHiPAnzvfBCCf3g\nF/TiSAFqtuGhpIuA2hTFSet6fJ0r61Ft4C+SSz5jbxLhM3V8O8LAAZTemAOS\nKXiAS61cptnIkMCwVmCGnJFBJ+DdIsFmIpg0LC1ydqTeNsKR8E1qIiM7W+24\nHFuqcxDTAf4iuY3dzHK1LDrn/KRLyxRW8R6SYr0Atb4ywoR4pWlchEAroh1E\nOLVF25KGTtLL6Xmh4jNHHJN75R6ptR+hX/WSB/wuOsXJlf3M+nKtddkwNmWv\nPJV6WFjyZCr/xl03KvuAYtwnB8sT2mwa7oYPAZz+kSGwjBDPRuuVl4Xa8Own\n+QGQrWLYmHLekRPDIhvkI3Nt9/WOVILWaEb0chH4CnNBYpkaFgX2/fDXrAeM\ntz426Bt6Cw3xFAtZNeSZsHYRPSjJkVeIPV1cfqTU2Mp4zMjsrKK0pPszDmLH\nlwoeRDsek+X6WKLK+isu3Vki0oezoEwenA2AI1a1VzegyxzEjSdc6fY8jjBS\n1/EIjIp+p91AKbaaj0a3/9YQjVZD61NvPDfi6dmuvjyrnCrI/uDAAXFNUQbP\n/OBBv+2wTSIpMaZ4w4S3kjEXoRiGhKb4VTTklj6sb9RYxvcYfmJmgVL46jl9\nG1h5\r\n=FKQK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHIlmODMUz8UDzuaCAUW2a61ONtKpHTW6Gq+HgskysHQIhANJWuS5vDb5DJKdmD2WxL5gk9ZFKg9w1OrujpiWxDc1q"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.b9b0e330.0_1621976445169_0.17060722691569574"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.ea2a8063.0","@material/top-app-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XfLAhnp8tGJOrageOOxtdn4plpCTY1fWQweiTNNCcMw6I+2o+QYzESWS2+f1BtYX51mqdJwp12UQWpnV9F4BFg==","shasum":"d5796fd0d5e61934a6aed72f6c222f20ae927124","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.ea2a8063.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWatCRA9TVsSAnZWagAAIOMP/iNivznKnBqtMMmy5skp\nip/nHPHRSOVkZH9j6DQcqUnLjRIQlLvp1mI6scskoR3iACsdkxT5dp5YZPXG\nEFDWL1yJ3EeqQ4wvwzwuV8JDh+zYfZkwsrADFQKyeTHFOufuLxsqq6h8+N4K\nSMqUoxMqct6JAXgBmladKQ6/4VzMdeND8EsS1EhHJZIMgfiBOIxDdYT6c50h\nyUvaPRzFPPEBYT63EtQ+Y8SG1dpbZnhs6cKY5zXA6PuGHmvy9gqtwuYZiGWr\nPqDOWnsf61uDVDtasnCwZzMvsDOE6aTcSxbxutECwdeRarU78KFCM+oVQuux\nWshT8Bb/YT7/5VICLQYYWU6HpO8Lf61eDZdoSyK26Nok1m3t2NCGvjcXsN1i\nyBI/9RxK9Wa4BtmHQ13eO8n2Q8cILLeGemGgr4bjpXfcpZ8X96lv9n6Gb614\nc7m5YMa/7qFRqYvaI1d+La3zT6SBcwz6n7uFYiIo1gL0WWjUW8UvZER4meXy\nF0QR14n3FtL2Wpu7Dr6hJM0HXHWAvzTDYlJNtf6Tp9ieAezhm9eslI0zxw11\npG36JP8rxyTPlkGn6rxiWlEGi83DlqvoRP7CiE8IWF7KJVabRfDPrndAvECO\nuPuWGb0/r4aYB/bFtAPMm0dtjPhbZwpZGCnBhHqRWLdFceUVyMFaJpcX+0WT\ndxtp\r\n=j8yV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACiKr2eMQU6eUfHd9Sj3zwibz8XyKu0NIAbtJ2pI3lTAiBxemviS5kR+zN9AP6nbgdFEuQeEjQzFnHGxJEgbAnZtg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.ea2a8063.0_1621976749569_0.8795196281271873"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.60cd9178.0","@material/top-app-bar":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eQ85Cz+9BynR0Xr1VNxZ5CzKW/CnxJBCaRWYs61bsLunmTnTOgqWu8wRyiETnm3EkEzXoMnuOEJ7qh29S5Pj5Q==","shasum":"a01e6a48a22b9ce4f9fda514fb30c95f30bd9c9c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.60cd9178.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYTPCRA9TVsSAnZWagAAVmoP/0zSn0+fT/c1ViLnaKRv\nQ6kyRkEdvNsgid8cbF5spwP793Fyqw96LVgYNgGrdrguJ1mGk6tGXuWt812K\nkc2CeImwaW0YpOA6bjB2Uek92AubDpq3XxhKW+UWozE92IOidiOMQIXDHOtX\nVGDBqZdJv/Q9Hcm0G3clLPzNQ6uVDCQLtZUF/1bUlFjtMcx8MeuF1aYk678U\n76ueON3tD60pEqN4XmPOqvP4o1C7IdiU007lgLWMDDSPlSD7iGwy1rdcvfPN\nPcVXJfp60dP+jFVsx4n01n/1TYXTS0Jd5ERYtr7b4elqnRt3y2nP9/LDut8T\njB/mTluj1uzhAewtdJJR20EDUvO4GY1f8SRSafvfXrgCqLqgNOvNYrpOOLIR\nM3JRhHYsMrER5l3BYuGvhAEzp4dAoO4hDZawkOQP3kmlgnaGszvv9NoPoztd\nnL/6BhPLthZi26FKxAbhiYnHRrXULKrNI2cM4ERKOgnzDstwG0PurDbwCoeo\nP1W7MGjZC+HND18J8KlxmVqcyKITTVkdOApiGvYv7q2Ot/E/QLyJHlMih6ya\nQYt0Ax3EAAbe31Jy3+0nQZ/UtV7KS5EE4rrydo7TvYUbM2VwMp+PC2GuHCCq\nfk/vQ4rMBfQy7zA8NaX7H7YGCQe1n2n5jytzFBoUyecOcz/hZ7Wloq0fWQYC\nsj3F\r\n=lv/B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2voALAzwJdPZA8QE37OEXdCLqcgsQy9kSmtTM2NCOVAIgFs6lp6L2Rx7Plm7CLfGp0iNed8Mnp+W0e9sp2v4KyDU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.60cd9178.0_1621984463160_0.0998114223146489"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.b99c77d5.0","@material/top-app-bar":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-f5UHcitHKZ6e/Npls8H4OevXJQu4TX9vm9gdYMZENcb7a3fyBAtRnmVMuSCAHgH184YuevDZDeKDLz9i0A5+jQ==","shasum":"a856bcb1afb0cfec0bb62082fc1d690c3421efc4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.b99c77d5.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp3lCRA9TVsSAnZWagAAWCAP/iogZgkjKv6t/7dW/O1p\ndt024wxlChGpTRohnKzNoxsXIlM65fqPfAc245RFCXvI0KgndtsVmj93sWPj\nzvi4qOsCKKjizymVJcOrX9ZE7QTsTLjO9hqnDJ6AZ9szWbHwW0Qm+P+KsPbY\n/WTNCd1nMurQsaJCADrX1LcWJamWdikgbTGw9ZG6XiY+tddU1fPPI71tzzlf\nQKJmXQHmhM1/fFct55NTyWUpwRIqjAPy4HQdl86dwFkxQvQqKivSk6U18S3/\nQIEdlg47K/Y+52flyBJSNTcdtIh9W4qSoBULy0GkvHFnWT5SKMg4FjobEjEx\nyUpuc2s6YIo5rP/K0VS5LRez8p7irL3R4aeVBQT6cQrIIYHSuh4xU5+4TbsE\nozfZgMgSmqYQVnsbPruTIsZcan+7FaASGFiTmhB4mQ3pFlfskU2ST5eGlqSY\n/xqPTfpfmPFVBxtQkEyKFUiZhsLMt7oA9e/dtvdkb+wugOP9xpWoV2ojk0b7\nvSWHdqmnyiwTEh86WNiINw8CWcOME48oxsod2O1vwAXPh0kxR6/pPw7mXFN3\n+L4DDSnslAQalN57lGOlq5bLgRX2Ko2F8+89XFiXCws4vonfAqZ09P7ZqmA4\ns1gCOgIb/KZ7jIgTIpm0sJn0wPKeD41oMl2vTKsZtPWDVzooMHUh05oJijAu\nIQE5\r\n=arQD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICiheXeOwJeD8YSMKIGu8/ySMdzy4sT1qIdVUNgZ9lmhAiEArtuSISqVy3TxIz2W82IJjLk6TctqpMwi/HrOL0skm2s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.b99c77d5.0_1622056421432_0.16983070356995267"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.0de82c12.0","@material/top-app-bar":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-H1cAMtP1x92mnnJMJlzDfQuqOKO7Ht71YPM7PitJEVelzPnS4nnG7vw4+gKu/rExtHEbE2ER/EbgagAqniKQmw==","shasum":"dbf3b7db6159f20d0c5d8b2b7b1670fa617dbc85","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.0de82c12.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr4vCRA9TVsSAnZWagAAfrAP/i/KkSyKmoiaDLtK82qN\nOsuZtMVKz8atmEOdhYqUBe2iIPcO1vcdhuPnqM5Xgqt7vyDvjqxFNgQNVIo6\nKad6nM3YGvRUU/H+rdmpcKQl3t/XL2fCIJp6mS4SSIYbsHu7meIAze5cRTci\ngLMwhAL7ZbFh80s5pBq/zacGvfbVoACzx56oOr8eZN8yAU2zHRcPOJhMAmlO\nKY+OJ9No5HITTtZ/zb8mWly0Wnq/vJPFKObeowaH4Mp+o9J3DQK7Q4/EAObq\nHiil7uWuGqoPlSyBJ1URaSGpFnNqvDvg+V5H3FteGtHhHSeTgezb9ppme/Ki\nIpcKf+TgOi6p20ype8nODPleXIvRDIznSqKOLt7cqw6AYI/jA9fAs4tctAA7\n2cI/O6FCUsKoDBxGeHVv72zp+lsKJdaVnZcNB+hvqGYelTd1anvJocBewB3o\n8YKVUyI6xKRphpMipTIsZFdNKfsRGVhie1Scx0zZTxF9Dv7XP5+zRhiMLVpM\nVfHG0NAFLEr7+1MA8BkHOJ5+fSMU5OHawU2S9HcHQjJSbt+Juyh9iOOf82NU\n1bGObrR7IWVDocWTWepnq2MPSvqE/hDuCq6du3iMb4D6RwObiDCF2v2EihwQ\ndEpZPayiBHbXT+XQsBLw/xntZ0Mcf0Mu089AsRYXVFvN76Xmy/AFlg/M2dpP\ndxvd\r\n=14O0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBQpPK8evXeAL35rHWxRxdtR7QpqMs4IQKp59T45curZAiB5LBSIhMnBxN9vQ16N+LSTqYSOTtZlYFHumjNajMhGPA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.0de82c12.0_1622064686956_0.9846046006549365"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.227a4614.0","@material/top-app-bar":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Dbh17syNKKAYqwL62o9qVCCWdJmrOBA+s1aRQkBX/dhZ+cm572MdToteSOeuz/Iv4o2TFMYUD0c8CJlDNDtoNQ==","shasum":"e11603f026cf8f354880ce5cb53bc8075ef6051c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.227a4614.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8LaCRA9TVsSAnZWagAApX4P/1n8AOlteXOOFx0/tiDF\ny0TViXJNcwEK6rGq30OcjNOYy0vb/tJ3ZbmrvGN988mr84QVfZyHwOcrLl6S\nu+e75clhtRJiaMBfpa0ryNNg0b+u6+pTKr/uroeFb6hvaJB5PXZVixNIb2lX\ny9+rp+/yhNb7EGRh4OxgWBWJZ/6oDrhtvvC61HM2H793M5/ckqrWcvmxQ7Dg\nqiuw8AAjAyTpHSo81J654bFeTmj7cn2UbOHmCmfi5No9eJf7W+505/nrsTkz\n2SwwbObZ1TcLToFfvQHMamS412kJOnFDIYYIxhVTOd622UlVz/xUX6kQQc+V\nialBecxdy6H+ZpUbAS1uGk7Z/Q6Gtff7czTsltper3zBsi4hM9+UWDnNEF6x\nlwBUATHCSS1chO0pqjjGyAkVWa0d6Oz/AFro+ImZ1uJzdyEoFvd6ZGk0QNvM\n1uQ2mWjzvhOV8QQuj2h53AS2SxGWSvxrJgl5N09D96v+Ga1yGPNSS70UQidJ\nzYZCeTx0Odd0TBGWy1qBrgBb/DN5n7W7Q7/euQP3iTkljs8v8A/cjE1f1Wcv\nRIU4bGeeve27uvtmu+WTsKWRDWSPCe9ZG9aj4iF2zrvco73sazo5GcddklpC\nor9dzUFax1fe96k6ObEtKNNs+k3b88cZDNrwXiRN5MRaqUx4xqWhusHQAsO8\nUYpy\r\n=kHZl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtm9SZbrwh5nfgi6yp31VvnIoRHxpkrm7lew/L9CfGpgIhAPgs1V3a+rruQYkF0tZMjohBJ+mf8aJJ4idUDDpsuOEi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.227a4614.0_1622131417594_0.642247646116747"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.b3d21d31.0","@material/top-app-bar":"=12.0.0-canary.8530d3514.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-S2OrOFXZDQ2Hy+0xa2rrhd2UPTr6fkCGIcyPpj6dclP4K8wLomIXG4pm1SrSFBOGSWmNCD6+laXV5vkddts9bQ==","shasum":"1076be340da08d24102f02020112a43c6559aef9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.b3d21d31.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+jTCRA9TVsSAnZWagAAR0EP/i89y1bCgvjqG8fnAWSi\nVjcOfJKdJtP7JyyEXQAeShCIqBKAGiZaoJlB3azB9XJGfEMI2RW+d/LdvKih\nvHfPL9CK9Nwt5re/NwIfcZQ66th810CNTZAH2kDwjoX4cM6VvXo22SP71K34\n2ZsywaDwNaLpMP8QTMvD95t4edOCOHc/jE3VOAUIB+WGBfwrKATaVd8g2xEQ\nBz6t8Vd5nALcshyrQTO4rOzzqrbGoRbaxgFSFclDN31dHOA+cd6APEeVAx3A\nQFjU2ZSzwy3M6sFM20vtb9QZFv04zmoOk69AZMHkyUAeT4zeBtZ3tpmrLTt7\nQelhRP5aArZ8k7bic4mPGl0qpBzea8BVnZj+aPflzPksdQGvuuq88m4E5sMY\nA6Bim8fmmRcKwFNavrhqpAieWIyCp6HVFNvKiZ39/gKsL9LWAD24UMY2v5UK\nH5gO18PmqQYSSvivaTSaY58mDQINCz0YREv1L9p/B9bnGISx+lZNod6qVtVl\nboZyHuP5y5ZnC36V0y8FTUaTBn5B0DORGdOtoU+9ykDnbeuxIWfGp3CE/ZC3\nrdm4lnMmj6LLte0nbjmbliO1TDb5bhUnB/GwBVtQSxIJkjfXUnlmScamU2+8\n8dlk4/+ouESNOE5FWd8IOoxEHvmn236rYKu+H//JXnZMk2rh0XjA+Pnm+Hf4\nL8iF\r\n=lNji\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHdGKAZPwJB3r+newlQOzZVQr7Ja0K2ZN0s4c/cnTyOAIhAK0KDXF17iZ9ZS7fE805K4UknHo/iux3nfOCZRpIZE8n"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.b3d21d31.0_1622141139304_0.6150738588003133"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.288c33ec.0","@material/top-app-bar":"=12.0.0-canary.00b5899dc.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0o/0oGEHK0FVPmVuaOEGd67VlAwrLKazpnlFofK6wDu9JOeMlBs3fvHyHO8tm1a/xu6sUpz5OWBzsxDldrg79Q==","shasum":"3bd07f236d0285d9cf3dcf576b0ac76c62702f6d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.288c33ec.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt90ECRA9TVsSAnZWagAApfkP/134rD7+gGha5m3LwBAh\npbODhRD5k2DfhG+lWV4XXkb8/8KyfJWIn1tla9o8nvr0jK1YNS09M5NJBUfh\nvOdSRtAgGRc8BI4AT0cG1FfrxghHzwea5KSg7ckvzCkKT2Oe0b/SK5JgjIia\nCNEihTlPjiKaTkI2M/S9kwyTa+n3EiYdpMryEFB5qMFLHiAU0LKOSkhNAUTI\ncM/s573lN/nlRYYtwKmOpEKZsT8F/ljcrUVWAogj5morYBuqsRvLDGxlmfm7\n8EwLHiLYPPqh0T4W7MEGEadjHEtYS7l5ybQKXrj/BPYBQjOZXFEIHGRYHaNi\nwTBX0Gl2G8OK2amlpsIu3q5a0lwDeoLMnua1KM5J9Di2arIdxxYoq8+ON1yD\nppV7lj22bCTzoauV4dkgrwr6e36aNUULKo794ILeDq6GisdOLBU+0dWSpjqd\nhm8wQVfqe7kVcqSdIEFNV6Q76z0sY11cp0adV0n1BRNAWi1XX9/l8PC4QCJN\n9RlPiVFnd0PWmqbhOUqvJma+A/gXv6KGFZEGYo/7yDzyIItIzhtQb4Zg1OLj\nOlDtXw8xbVdnXv7Mtc+2gfpTO4MWBuD7OM+R/TqHHRG8lR0B6Hn+fnyyTPW3\nc9nQcR7KVIg5A/yp9lAHd3/RT3rFLi6Uq69+r3aaXM8Lm+zsuSSDBiKKTpA2\n/XID\r\n=XZjr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDlWtE5goMuy/PLN5yazGSgwTJm1YEI4NcEJ2diWGvyLAiEA1uZkaDOD1mz2jGJRlRXwym6Lu3HgSHcsyl9YjUMjJlw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.288c33ec.0_1622662404003_0.413019523166384"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.7eb7ccb0.0","@material/top-app-bar":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-547+E/DniKyok3aqUDKYL+N03dMGYls7by/vul9/IXO7egNKebgC7VuYqf765ZkLs+MThaCZ+Aqm23Se+zJaHA==","shasum":"05b8a14e3c2c0267ba91a6595fd98318a1f86054","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTOwCRA9TVsSAnZWagAAE9sP/1nSkx3WqUyLxGnFySBa\nsjcuZDOagDrVG0R4MxY4ETrgIIUs1qpbfsvsq0sSDUldDvGGBxjmNN4VuUYn\n9kqKIvebGLLuns/2ir7U51b1GK8dKDxiPu4r3U+lVLG5c1KUTxKh6gnKzVWu\nKflQMENDbcy7K2mjF2f27qSus+fD3m1PrKL2UkhBgOPIDbIVqXDRuHFSmtco\nLbotBOa+gYDmSenKeouNCvCZDcYjp308SFmEH1eLHyx6vFpbnD7BBy9r0xWV\nf3aWy2ULZKns31LpOwPql6TfOhS9TjrsJqvzhEnxJggTyytHce8MKH15LhM/\nfDAT6ooMq1qWLyVkqT6cUH/xMdhz6V+wW2aGNWmKIzlfwGz7TY4qk7OawWFS\ncwtxdncqxyVXlYTMcLcVip1ZakUvXaXsB2NZ/L3WCgRgq0x4XHAZWokt/GIs\nP3S4YdvfmyuLGfV3IiavtAN4CIY9Q/JUMl0W+czZbY8lxyx5cvV/OuiwOINF\n1N2JZM36Bye/W5Rl+6Tnw8SQ4jX+o2DEC2g2NpplnYM5WpAis5flWL2mBkOz\nOeYu56WPAX7SknFGA6xrCUxEP8pOHVlByNvFCPhmJTObTIBH96LcpATG31rV\npJE74pO+uorseTOnTbfrtVUZLYoVU8nZm90eKTrCaNOtk/0xeEOnu0YQIGBe\nHKgC\r\n=DHOI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDftAoHaWRMmr2rAuC8qba1QW9T7iBi63zL8t1QRpY2xAiEA6Ws54pyyNyxp2hpB2DAk8Dh036W+xpXObWcn44GrCYk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.7eb7ccb0.0_1622750127997_0.9590581968264515"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.7fcc0726.0","@material/top-app-bar":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8SG4s9xn7ratc9XFr13dWaWqLhI5XpxNuNHwYdXlnx5vonhj8YUW1hP2QgoL3z0RCchuxZHeCZpNbOaSUjs8XA==","shasum":"fb6da7a8b360087bc97593d6fa658e5a8a7511a8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.7fcc0726.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr2+CRA9TVsSAnZWagAAyZkP/1k3GTJUBcNHfTL4EvqA\nITS0WyN4U8h6vHi5bpui7JkUz2zM9bAM4PlrloR6QVQgZsoWLr9NjQgp2hzj\nKyeyHDTwArtx9sdkoH5gAOPTqDQ/hL78Wkq+vT5kTMC009P/MudTKhNRWBfN\nLnnWaI1lmJ4mMrfIfeih4ljRXynLApTeBsZRnIraKMIpxUhCM731JM1ev40D\nmGxKzf96exPD+uAK31b2mstHjnQDux/y0t5hIlwdLEdLpe2DRzgqKZ4UI2Os\n47iRYr0z2EyX2/kOSmy1WInsqVe6DHQLUZlHwMIYQAk013aD9n8HkwIPJm3J\nf2kVSBNwgWKwzzlyijPKD5HHbn3vmDy45XYzMxmfaALjfTJIq/vkb2VLT/EZ\nKt3o2EC+8xhWK+3tetAxohyZokskkAL7TWKk3aVOEJa/OZbt8Y2htWwA7wqW\nUV4pR/TM6rnZFnfM/5whpYxcCpG8IJU37P1E3S64ooUt6ffdKusjrvoEaYDy\nInj5yvVRsiz+Mm0c0K1m2naGG5oLvTOwbAd1rX0U6qCrv1wlS80ZkEWQZ+d3\n8BEvhEqHw9arto9r9fUqvWzR08bqtxpJx0Z4WmYR4YiBiyiF1UyoGYKQM0pp\ne5+ZjI/Gu/JPIsU7tb8U79bEptRjNi+kGwPejTlMqE9YyVLwNbyAoGVMY4Oh\nBgIT\r\n=shHH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDiYhxvPO5s8Je0KYApq9vEwbZ/PAhIK6nsQpp+JYOpjAIgGJNKasIBw0RQ1PJazpb5QhcDxBRGl6uSCgn3Bs+W3Eo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.7fcc0726.0_1623113150174_0.8261524372836384"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.220a4e5e.0","@material/top-app-bar":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-S0iqe+JBPg6+VZlgLKfmtykh1na/4Jt6dP3EAdLQpGiidl65VE7mF3UXgoCJYCS1hmZ4AnStt/iGYUqhH2/osA==","shasum":"840c140e2b3eb6e5923a0ea382680ef6b0375941","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.220a4e5e.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv63kCRA9TVsSAnZWagAAACYP/RH4SS4aYw51Ri1Ru/FU\nIhPu78IRJWDpKAo5coyJE+FbAZ0AmW4qaMRIuFk2yF29OUg4NiXTH4HS/xBP\nNalhsYj24bszES1Rvo3K8PConTqslRt4y4OKjzU4SVB5gFnkMF0qFfRUSGkZ\nA2wjGhNbHnbpyd7SRbDDlXv1FGu1bS8QA8PdCxNUwUFUGyHpwAd0iOixQc0f\npeCfS56cFNFHB5aha08NWyIv1rrMzkU6bYJfVgNJiJkWMdPZG215Kee3/fPQ\n0Oeub2vyuqVqxWriCQGvpGdCm+xlNBuJGq6PTH0+yR7f5aIzQzWVexMGw0xm\ni1T1wLQen32l4HW/sXDlovL66RNyravTXP7Gf6e0qv1+18TXpW12jCqFC0uB\nISR00FqJPsWR8NU/XxfIyeqjt9JLpPldMhJeg3uAT5y5rqlZYRZWPDN8FDqZ\nmIQaOvDG+aonbXB0MIqTV+g44yVgF3TEfhf7n+QU29/0a/tiUFFfQzBvYZ1V\ne/mWoHnB42WDdYMhQ5n7ey97z/WQ7M5oY3we6TKixc4qs481PzbmPAW+DGjx\ni01oWbIrJqCqHA0ocybKbCrgt5elgtSBcKBBZ4ksBwJKHA3tArf50v8CTDwj\n2KpL1FlK5kxODxEo+LCnkwsWcuGUoyF2TK71pBtnLLbXs3JH0jiJlXwcseCB\nJLsk\r\n=G+aX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDm92J5RVvHViAtwOC0YbHJqbneosmTPSa77GcVD5skVgIhALnsFVSDz3HXdXhL1AGhlvx0ghJZxSc7Vx0GFyhGcCE7"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.220a4e5e.0_1623174628622_0.574326957580241"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.6b2d6ab0.0","@material/top-app-bar":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mGJYgn8lzq68wMRuY/Np9UdvKs8YlcqLUDMPM+sFOPgpwt5aOmafNmpWdnswe6tJn+3hmq/XhrDPOcffzTd3Nw==","shasum":"d38fb3d58dcb63ed2975f2b4eb2c519286ce095c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7jMCRA9TVsSAnZWagAAcBIP/i/w+scdL5L6S+C5Ae5r\n0ypNLJpQIOYy0qCCO26qhW5Y1BZKQ4JIVWLfmsobfJWkXG2SRgprJ7ZU10qV\njOUO+XM301gJP87/10gYF6Ic1QY44pULhSUY/cO9uzGc9EEJtibboABMwM+c\nMwCj32ujIuCbT6cHODDud1YkAjsLeMaL6LLzPsyPsXsY+AlVIRTUaQUz6WXY\ny2djsiJg2hSad6l85nY/71gCE4DYIAb+/waobUazDPi0/NatBsV7ZMkJrr4j\nATjdm7bYJYJxQ0kAAjcanS20V6aVtuPP77RBvUTPRFX3GeF3xmKhjum2PQvX\nx1X7y7fq5ez/WK03ensvln1D7pRhn7wcVwRju6hnRI7cf06wDm/kh0zQpcD4\nHbeel0YbQ6VOQ7598b4/JmVcOhz+T6YgnauBaTgIYIoIWNzr0stCj6NbKb2i\nU7kbnHz95F/llabVV86eXzVa22pwW+PZCeA1UNR79ge7fHmRO9h1Zl/iuijK\nv4eMEJdqwB1L5dyjTFCBzClRLKevKX5DTzUwJMYi03URR9G92KUi9WzBSZjS\nBx2BOMVwOmY0brgJGMDEk2pRUy3YpQpaLUqMyrSPRNtaanY/r16VRePdUZN0\n8mFrzUq9A8AV6u+0Apwd0j8zCR4StX9dAqI93zYXFpRslwUlG9XmiJK+b7LO\nsZVi\r\n=UnwO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdh8yRg0vdAduLdsbCg0Qkwicb2x06PjNydNksugGJIgIgaqGOuquGwPMthZOpk4igVA+CAC+PRzdVyPxhZJHS8SE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.6b2d6ab0.0_1623177419889_0.46571149719940297"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.2b20825e.0","@material/top-app-bar":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tGSagvf/Oqm0yWBYFWPCCZKefoAQmNaLtpfDJuJI6BjrZ/3I6KZPu8LaBG7O3X5uLnXBuAf7AMwEayjCsWfBIg==","shasum":"a8c67ce60b0e02c488569d91aebe034443c095bf","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.2b20825e.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/aACRA9TVsSAnZWagAA1zQP/R3XZEONKT6jkAeI/imm\n8U4sN52nO4c+MJoSfXfRvSkCJ44VahPlGU0PM4/PrUPSQ6zNkrYraBYOEO1D\ni1B4/1Q4Gdm7xCoZbwvc/gDCW+yRl5gS98jf6d/qO8fehPIl5XzQlG4L0x5y\n6BaOFsaOgcwehL+6jV0dhoES49f0cGsc0lkTHW1EAYJu2Uk+zOwXzr01Ws3+\nCvWfApsH3IdwTGx7y+OsF9+/tG2WWJFSr9JzbBY6mCoj+EnZYJ/mWbWfczO5\nvlfU+U2EiITL/rnnSfVDlMajC81bf4K+seckpagzxmSTcTUDQWTzp/xnYkHa\nttyZdBf/sKuCXzvK1A1/peeE72nUrZAAwoT2t8z+kwkkFbzfmNkmp3yeE9+O\n5oBcgyYD3Mhp7crLj855UQyI49u3oapHb2rLacPewL4UF705oDxVSBIwU7C1\n4iThJubgWW70Ej0FAqlj+zxTkE6mBdEORC+UtphzeV4+LhZJbQwg+sSoBbyc\n+51RikXpX2DKEqURV7iDYBVnEI9kcwIQaYTI8+1Z26q0im4lZcLBZA2qJXmP\n1yeZs6kJy9W3KRhFwSJX/mALQsP4yQC2j2eSFUGv/fvcjaKT+c1wI38w/cO6\nEPMOC4+w/Id5QoaPeXzgIqfY9r1JkoMHsE8HrYigPPC7mdA9O/Kwi5jVxa2e\nFPQk\r\n=lfOX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbyDutCYY71fQF5bSr1lowpeAWDB8vD3zVT6LBdxQ7NAIhALJzzH4HQlGrbueAdKhNhOmRRfkR2EJj0SQBXq8muhqa"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.2b20825e.0_1623455360400_0.8753197833191757"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.e1511867.0","@material/top-app-bar":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-R0ZCb1sOXP/A8ojMHekH2aG0sinPJY9JT4v7XcC6zbHR4/X8757Fi0sea7AC6p10ZmwYx+FFVvIPWv9b0TNVCg==","shasum":"a6316b43049fafa479df412211f9839ab4f8178b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.e1511867.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAaCCRA9TVsSAnZWagAAue0P/ij6PbL2p0EJFs0Sux87\nK6Saygm0OrG8hb/RpqyuDM3xGsaKUyYi1BJOvmhzu+wHKPpmK/9LSBCGS8R2\nxD71beKLtHBAXbLY4xP0s0eNGCGWUNAwCnIpr/PF01eo555lfn9/pThSj0HK\nypfVAxv2rHAynVlkXEPMHrZ2Hb5EJNA3hPOsC7mu8VTT4wo8rZ9IS6YHoN+g\nn/0D1YNPp/nY6larfZz1Jj0vEKQffpCe1Z7ZKMvKEfB9CrQENCmAATpt+vIj\nSK4asSh2aFYMDfus5grNn4o7DHTMBByidkfBhd8N6mq7sMeemVdZTzpDEVsr\nHO1/wtqWSUaatZiNj5herp9SNMDdfuWJzdKUzoWzupiV/92RSd2auV8OmEEy\naQvV8lqtA80/QFlLBhiJsVVjslErdG9sPEor+4fy5lESfvZfWrwuksxatZbn\nVvsItkQdWVavZNSy8mXsVYDmEGb9uw477tBGvKhpTOFrR8w6awHSbhDT/EDR\nONyB5cTZhgyw0TZ1Tl7ppxhatbkCFo7yI1HAlSlybI8EqnQLkydkBFWvwlH8\nB4qoUDaLDP2+iiCtZynXt/xHX7hpFMZeaHX0Nciew5nLioa89uyePLouec6/\nz82dTuh/y0Iuq2sGZm3shANDkmkJoRbDhPUCWd5w8sn4esTqwbZVtpB1ygLR\naC0r\r\n=CloH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDumiySScAEe3UH5SfLEuOklkoxhS6cu7B+g9sB4wcS7gIhAK/Uy3qbyx9Xocf9CF/RvkqFGquNd4bSNytrMRXZWpTh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.e1511867.0_1623459458687_0.1406497604334247"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.ef4a0c0d.0","@material/top-app-bar":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1QcflZVd52yMYkM6zgk/xwWCtscCWVtq2fKCdJGC9WecrurZros54VylZX2Pv+TSoJa/06YdWz1nO9LYHJj8mw==","shasum":"275861d9413af06cc76779c0159bac45e25617df","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQTtCRA9TVsSAnZWagAAB2UP/06s9buzWMvBwEW2GLPh\nd4KAIU6f061ZTao3C6f467ec2mbZsmkXZaXjGekYMvtHYovRh1Od9Q/g5SRS\nTxU0HmUd0gdhe5m8midGNAk0lG2SrLUpXs/3BX5Mr5C4DMUqRYtwerYxkBQt\nRnE1eM2Bw6a4Kfi6fXc1nzdq4C5XQGAMEWINFH5WRjVg8UukGG1rdOH6F0w1\nZg+XBol+hS1bYKB0dlIURWS2IPA3rY2JwOQfESDdzC0PItKqwik7HTMK9Ki/\nk0FFoXSuMBlQcome1cQavixC+5eJu549Zd6cKGX90axFCb+Giyj5M+FTxDVC\nvBLN7t705lc9XB/uqoRYP+46L0QMt8oedrgU75T5/GirZt6yvA8/1smm8W7+\nRSwFHzoeg39zRW36bWKqJTKxxmHjcizhqxWxDdhiD6lurVV4aYv4z+08pOSl\nWNSpIpmuI3o3WnwBYgHq1/QNGvXxg3lmST0NweAFoUZHh008QeoKrCn7Djuy\nGmMR4FrZeE8+TK/wrhDCgyhd9NUpgcnmaJc3FRuOiTTLJ9LbahUpoNm+fIwc\nYOf9cM7AAs457EFbaZ0yUQyjjk83KDzZvFgcb4I2KTlj45Y8j98YCR48meft\nWgo7k8x0Jjd5wzYEnGPVFSGQgXi186LK2Sn2jzcwKMGSIN+OlhUbMK9t48ON\n86jZ\r\n=ilgK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAEFPqiJFxTVVUQE1hr6SoeZjWxKxDkjHciQQ9K9kcxLAiAkypiiazTju7hjQLtrnfJ6GFaJoifp1X7+sr6E9NWmMA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.ef4a0c0d.0_1623786733297_0.10938895766492451"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.573d8913.0","@material/top-app-bar":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cghfsvu0+jSFY3YIFcmzRMixheHA/5eKkS+29Hpfj8MmIHio8S9ENaCmF5lr1esCgLb1gwJnd4EEVCipD/NiBw==","shasum":"a05864e47d75796b24c34fc1594bdef53aa543a5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.573d8913.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSvICRA9TVsSAnZWagAAtrAQAJqMb4SwaJoI0NH2bHNj\nYWKdB9/xd0CdPppN82MTioiq1cBfqKkIshex6Ji53o2ozBXukoYsjMMmIjJv\nQYITM04XNtYWk91M1W2WePbNcAyBAufYGQWkc9tpqixhfQR46NzYSj2rEOl5\nJdNWvGBxnDpz8sKUVPbXV4Yd9WYLSOZ/eMiq+G6SvD7r9HAr6gsLVWjMYHxq\neZYbr4kM77Y0x5aQ9UuCxLQBZ/TzIW1R7T+eVmPZp13eEDF4u2/qws+CUjqb\nKP/GGH3Ya6glLL2QXF4A9murKsgNrew+uiPSE/8pXtpnS/w5Tnpp12idNOeE\nsJaDXvitodre/4OGdUcrNlz8hEHJgcvQ/DwGU2RaGOqPn901SPZKf3bJCROI\nTa/mSvblWZer0OTF5DsNtev1+JQSp4eDnytO3Kajo7CvrMu+dAa8awLiYw5g\nU9yn2JxnMP3uUFfOMLAIAqISGOHyiI3iGTdVa/5Uyy3/x2LImLd5rtacu5HR\nywWoLJjSv126iBiQWKF06/+EdZjNmWvZSGTNIm2dGDGn8w4TFobcJGnNl06h\n7R/AjDdVubheqg1Ajr1yYKKRK+RSwdLbkqybCvFWMV9aWHXpyQzKZQdlglTA\n18y+B9z5iQhNMzviwybfoDf3Z7/OB2iNF6pwMjThxL/SOMo8VlsOFPw7X3Jw\ndUYD\r\n=sIwh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCp/+5zaExRhZr6XhNV7mh7FdT+VGvWWeoNmXhDa04pYwIhAMAm+EW1zZ5oes0s6jaEZyKBs5ocrd7uU+z4HU9FPnm9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.573d8913.0_1624058823684_0.9495203889922865"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.21dba001.0","@material/top-app-bar":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-tdtglPECYSA5qT3/iywoX2JjjZq6/Y0CJRTSbgiTkVjd4yaI3khWkMSgQtiTt6blpdIoY69LhvdIibTqie/68Q==","shasum":"5504ace6cecd20f47e7a08ae71d023487defc054","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.21dba001.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0QdnCRA9TVsSAnZWagAAf9QP/ibnGBlbPqBfaTOsBd2p\nOdjLnnfAH5G3mCd4MsQ4SFL0oStV1yrUD6uT3HonFAVI2lMy5rDXDMysGQFp\n2k38uRd5EbOPnk/fcpBWCfuNwJ0cl6Ks5Yfv1aktfK2yW2MOCukJencxZbuo\n+oIk4MQBhie9+nhVQ0GszdacYf+d5cXlrcZuXnmBlVHzIxvPfwX2AQWKQode\nwjo5OnNxVa9nQ6h+WQqMSh1M1kPt5pPJD+RsbxCln8Lcgkl9Mf8yG/CleDv5\nrmoqwHDjLFBfubzFfrJI8KVAkHIIXAJHJRNkPKmhYu1g7SncdFqsBKazGr2B\ndb1Rmtz2G88gQHlwzCZZWFjbirFL4qrx8oqrqSOhij+IXZv8loHyAMVFQrKz\nlANuvZ0hZsBhddvqi1aNbPAGy7k0e500RQRLyZ/FvxYvPAEBiStxd8PZdYrP\nBh5jMA6Ig+LOFmaebwzCO27DYQ37m8fFx1gPuZgrDMREAZEBql6V6uZPGVxL\nE9XyhvL1LU9YPg43YvX/wHv88WtUTDZgWztrk6DcrSb+e/Hq7TLIr+gq1NCC\nYh6EDvGSHSrG52tj8mVBb/X0ShsbRzzRJokz9ArnlK/WAVAKozy18w2pV60/\nel9jpdP6WgWkuXZJS/3VE5eqLyFHQzMPeVBjt/hbyIJIaA34lt4m5JkGOk4+\naqSD\r\n=8iOV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDIKb81cDjZdMYpzCwwoU4l6s4MojNObihxC8AqIxjWPAiB+ZgP226pdo+xeJbHvCXW1rsnwW/fHBIP/wE4JjyYxPw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.21dba001.0_1624311654679_0.51294988562099"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.6f5bfd0f.0","@material/top-app-bar":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-heU098RWQDILNyckvkwgp1vXE21lyfTiCKXoz7ViMPfdQInGpn5yehJ6vdjPE1tpIgS8Ck4hO4QDE501GUPfIA==","shasum":"e120d1e8444c876e2f468c927a2f86b1980aaa9b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q2WCRA9TVsSAnZWagAATHMP+wYMNsYLNURDNtcHZAA+\n1EMMqp94RgNuTvUMxEvTCsfJyw7msE1tTex5xVi3UeOIkiu3nC4E0k/mNjIn\nZA982DdDuwp+ie82vDZvz59ZZPibEJf1zw//mKrHpe8bG+u42HOHFWHzTgY0\n1RYFh/j7SUz2oLoCBIeKa1Pjxy1DDVvGsAj4K0OCG0NQ9KdPkBZzEC7q7hRF\niju3UZFpWtHbEyP67D70H1kLDDKvl3QANodyt2/xNzclgjdRGQnc1hH/aRbh\nX8QQnEY6HY6rYnpztrNiQo9TZW8wR5yyjekiMVy8ViXbK/NwLVJePBcE86bC\ngFfNO1N7XkIgtJRawnQZCATPOrpHo1WfbA6hyvtNkZxFiLOhe6Y2FqVCUnf0\nHBvxvEJASg+Ty7WlXBUZCTQ1UBoKipZkZRJiiVkzDei84S4La5xcN6IESBeH\nO4sg8V2jeL/kjQA5N+m9AM/8AT20G/ych5dxBSfv+OcxJhvCiXGqMCQILlRz\noRM1/EZLdnxUkDFh2gHDf8vQPTc+hxG+ysQD3h49FmHV7gHZbcTD8osYuVFk\ncZQUWXI2MYt1EevaIal1a6PPw9OL6P7/+neOA9P/wwLiHfoeHzDnzx8LRdpg\nn0fEmyV9+PyoKjaX/N4IGMw0xjpXzCceFZuiX8j/iILSc6vwxgRDuM354j+k\nXCzP\r\n=1Qoe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHqJBnq+7fwUy6d8yWvL0Z0maXk7VAtJCzgZ39TYoz0yAiEAqAUH9zP2jOU8YXiCPeO4B2hEnZAOXsOy3Gjs68ad3WE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.6f5bfd0f.0_1624575382402_0.25353077637539734"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.fd8360b4.0","@material/top-app-bar":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GP5X2uyDebTk1Pxvuv4VUG1q5xquyhHpA3NUZ4XweuC2VRic9l4Nu56iMGGe4wT1/6c2J5APaMaG1n7jclKqMg==","shasum":"0d4445ad5817cbb90520fcaf522478cae26d5f43","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.fd8360b4.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1inoCRA9TVsSAnZWagAA2mIP+QCT6oOws/Sd+wihbqFv\nsTIrReLBthenIZ7VpVeozv3tSo0jAYd5PTF/5qvKSLry0Zb23XJeIbV6WXag\nfdKHtfij39KwO9cKYqSkst34rnrYkUIbxjYOVJ3R8VKBCNpColmIUdO7OyXj\nNLJQFcwkIMcEM9H/DkLtxW4s4eBeIfH7SpCQYMV2qFG2y+b/7A9VIxxbR/uS\n0fVYHwnUWR8GJFlUlz9J4hyG1tovCprrpeOeDAu3awK8VFhmTB1WyfWpNwyc\nyXiYqjxzdNSqC0INJzbZSLxS/DsPwvNKPaUeyLjLp/3gz+vn4L7KQmtj/SIz\ntWLSCeWJILAUnq126oF9yWKoYL5b3MbB2L4TEE7Sp6mkduJ3ppLV1+iTrCup\nLXOF67fqTerynv4cRN1Rq674XrJQI958pHc2JFAUBniO9e/1Pb0Z9AT9z90E\n9FHxQUCPJFeoKQ1AM22+g02z4ZWUUZ+Ak+Y29hPKVhK37uS0sowSPS+dFkDT\nGp/1mJNSusn8hjKiF0sIAukjQd87TnlFWn0kzfMibIp7Q+Z3a9e34J9q8Kdv\nuIjf7WwSUE25yQvx8IoIxtZoc8dAvSkFBomPa2SO/oMnxht38ALLi5RhG70A\n1ANhB/6zRfz8eVFkhM8ajWyocOlUoACL1wCN14uArDY1EVRHZT2Qhk4tkpVb\nAC0L\r\n=mH5D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJvp1wL2kjQqUk2L6sAcQRVeey6WfILw41O6H/tpDlugIgH4z3Agsb6ytliYzmcs11Ya3a2V8EfcJV2jRnET15ig0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.fd8360b4.0_1624648168307_0.11983118325040265"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.6f74432f.0","@material/top-app-bar":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WYY2HKwm3QcXeyxo6O6JxTXcmjZ8lEVx36X1kIcIY/T+JICwcq5/D2ZtAbABCTRTSPtXpjgjuheOdK2UDPj8Iw==","shasum":"6a5fddbb59a67b0331ec82dfc34cf5858b25a0a2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.6f74432f.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kDZCRA9TVsSAnZWagAA0voP/2bX2RgU4Arf+/f2VWms\nr/U1acvTjaclgJXBoAySzQybBn4vZU3YBm5Y04FXbeRbRktpXeaEpyVJwXEj\njQZLysnne/3VzlVaYLqGO8pgz2rQob5By3ZDQglWb6AZUAdyBsNDw+SPc7h0\nHZj8INWhR12I2upEcT6A8eT37O4q1zggrXhu0noiflvGVKBMkKSW4HbBD3Zx\nt5l9VOotWdB7j5du0Ae3LG4FCP+qbgaQ/9TAgzOwSshXDCVCnqO8BbHdqqRR\n6eV5f6cwfBY98rrnK5YwRaoE/Uw8tfoozzIzcuhLiLOjK6FYDKCjlXQkwAvi\nMr8v7sct4refadE4oqSag8vhrbsUf0nBa1K6gM4aQH+wLG2+8AHKAKjS+plD\n+hJQcme7w3IUDeXu6lcd0Lc0tEaPbrYVAeryjF73SZv/dDwwxIAYj8r6MssZ\nVGBm3T3oELSJIL7TPJBFrVpjvGL1befN8PuCPyzSRf8VTjjcou9FAzM+SHIS\nGUd9oRVgW2sKu7kEgHy5KWxG6jbI3B8hIrXPOSBzSmeG2xQmgNc3LZZcbMC6\nWYfjt7ilt/wthasBVIBxpUdNP942QpdBPYlwL/xyfgoWlwfWdXXPwm+XCggo\nlJ+w+gf0YrTGf5fZMrywunFTce2OPa/Y+erkg6BqDgcLnR5S85HbnPbGQ85J\n300H\r\n=mIK8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3dH3ggOoF+PMX+1l2S3WA6s8KuP+vaVTlbocyg6gnFgIgNNQPUS5512rR4hBI1TnyuLsaGyDnKe/Cna9aCKVNFfw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.6f74432f.0_1624654041164_0.013891992096966899"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.b62f901d.0","@material/top-app-bar":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-9D+caT+eDz6TV5XjqmKuJ7asE5oMM7zM8MHeSRLguavto/pIfxdRqN1G+w+5CL88W0fp8rIcW3GiHXl4Do2vxw==","shasum":"c799eae3b3063e47fb8dda4f5ea0d020124639f4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.b62f901d.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lX/CRA9TVsSAnZWagAAzDwP/1ClnrsZ4hnRTwKcJO0p\nuWA9EHBI1MF07QuqlDcPfIX7d1Dt7Vdv7mjFq4W1PDzVX3qC4qSEtv1bnet0\nycerpiYENFcFvGVIyclYCV3x1nE1/iBY7kD42s34ErvKLXZRO4olB43t5EUy\n1wO3BkV3U3cWDGn1h8/s0g3qteWLGnzYlmak7nKtCqKZOEwmPKzjtUgUO5eM\n5yHuz5BYbUOaUxe0Qf7mf+UVMV7VdtT43oHZCb1sk4q+yDGOaGE5ukZ6inQ5\nnpJW16r5r8TqoetmHmCuJD0On0bi68MxSlsgoDxRtMwNnb5ANTu+ifpvn3Ng\n2lRoLEanTK3KHO2AJ9NSGNfK42p0KQkuR2cqvkp+x1ibFeei/vY6B+1nlglc\nmw1cj/CM+w3LCtcN+O0UwhAdI7Xo0ZkXXYoULC5mg20YzczCM8JCD6mw5T3O\nPd70UM+sd5gYOHC+nVCcpNO9TNZpLcWQbgZd9TwStIPfAgH5/NKN/LTHFb33\nnncnSoStZrahiB8GFKykZMsJsFpIsBjutktWwxQ65lXtMQKN5I0QZwm/8Pl4\nGhyLXUOsXT/66EepBKh2b4NDdSqN5ZIPJCp7GT/Uj4TW0yBtvnPg2pjbBVJm\n6WpR8lAxorSt79jpoyqLTyXCSZtRlIfBDnUIxKq9RXhAQFJFZTvYaUpj+i2d\nWkPO\r\n=usUU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHeKe+H+WmVBVDNlnjWk65r6bsLGXbv8zagfRfwMrN4eAiEApbos+qy+9XX5yqhuu6J916wfCXaBwttM57/t0x0t/N0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.b62f901d.0_1624659454732_0.9527325609280723"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.73122cba.0","@material/top-app-bar":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mhM9ybRgc6S6UFeGx20dvzcjx9/y/c6Vps5DPw/fgte3WQATFMN/LOdAUmP1RLb5b4YcfYUfcmFFObDo6nuztw==","shasum":"471205584b565d4b495e372701a873222f5f00de","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.73122cba.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3MfjCRA9TVsSAnZWagAAMdkP/3rsRpqbOrVWzJSzcPok\nLqSDLxTKPob7qkdPtAaSOFEduQ03jNKYqrB2T6prKdpuvN1k5Lpo3DDLBlvC\nGZFaKF5qFycyOIsfwfmKes2x6vfLv1h7+v3mITKGRWIdzHMFu1VO2pSykXj/\n/4kQ8CZtXhQmMR4BGqJX5jVxc4+xfbwPKCTgUDrBw5lfQMayhuWIkut/d+Ca\nobmHm29VqB2MmhJfIVH6I0gIVXtNbo/9CdnOTv8yIxF9ToDq2yVWtM+pWG0F\ntqddeNUuW37hX8gR1G/DYqSnssjVgGy31RaWD8PYMN2n6s5YHC0HNdCpSTx2\ngkg1w5XcvTQv9yZWLmpxwEOD6EQThvcZ9n40TbmsciuR/I4WLvY56SFZkubJ\nzz7jK0qt6jh7+SN0Sim6mjyLA/ajt2lZ1sDb99kNHaQb0V5tgHsZ5hoTavP6\nLpHkEejyUJ7l8CMwQOnee7hI1bMzHKLmGnordEF721TJzSTMV7yXQ5/QKyln\nqoEB96ks2G1/HZPUmFe6JdGuvLyTO2vc5BpayvduBXXl8ED07iBkvfoM3aLP\n4aM5gSAj/DgdLT3MpaInCA+zmSvC2rNjEtvJNYGvCoS8wTxD7VNte65O0G/o\nRRxOnxoaAMLB/Y29X6TByeRSeBt7Jc3GHDsZy9Nw/4CyJgvOJGruDBrajfgK\nbQmf\r\n=L7Uv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICaqKUKIJX0TqzWXXRSBfNDagoqmU5TWSONzv4byXcjKAiEApFhsQ50Wipfoq12yDJohWGK8c9W3OPfCIT7VsRFgU50="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.73122cba.0_1625081826730_0.4282394112226813"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.a6912af5.0","@material/top-app-bar":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+FpotK/V6YRiUyKbLGWm7YY1aarsM3CNfkqs0RrtNvgKorcLZ/vIsX3lzSQr6WWFDmKcN8BvLYGfNDiXtSP6Ww==","shasum":"2371438bd955e6b179817ded21d63b27086ada8e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.a6912af5.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jTeCRA9TVsSAnZWagAAJX0QAJDLIun0He+84WSUltG5\nQzetFfG02/l+5kwuXGbfMvGOPXP9JDpjvCDgDzfaZlG+duMdnndwOEruUy8S\nKj4L3Zij37s/YTiYQpHfZtKWSHscaGCWm3lkWYphBWobywS/HVyTSKHAGHT7\nc+WbtPyDdYAJ4SJdV+LUFNMkaxPCRLyP4A7RseCeIajzsyiz4MR2E8jlhsc1\ndMRKsKH42773wj3krZFjSnh3qGPhrlcnq5UsAmzIP2VUfhjXfZsF51FvC6fb\n3bHay5BQAWXw3NZ+q6BfjLj7bziIpNXLBO6Q/DqWbT3EVTBVYMdY93vfKdJN\nvDZucd6Zpd+/2l8hbQ/IdGTSwlCb+BR4+salUB1kOC4njnHW55dsrW0Lf/Wv\nASbGeFKbB4nhpiYfHd51n4ftYWebQ5By0XZtc00/bazTYSUcM8MHtL9DHaYy\nRNj8ZBy60YEqzd68jiiWad70azgLoJbhAOS3DYOmJfqn63oeOBrfZj9X2MBQ\nrA3amg5XCjkpV/9bicUOY58yQe+aCs0j2NWyzsBE/4WIilWgsST9QZVZGk69\nJDPZ/U3E8tS2Vr7TLUD/aNSjEtyRCqR2JwzJ7ppybgLt476+BCoTnER17zFD\n2m75fuebMOn5vnG1YgqW6yI3Aid8MlvGf/9Fw6aImPxjK/Y4eD91nS0PdPnb\no3yc\r\n=qL7t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfTZYWNjqjAMliCxAKledVWJmgzSp7fiRgOWBHI6BCngIgDO86LYGvhKB9Kfmib1hpnrasIEx9b3hDTWWUK3F66ME="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.a6912af5.0_1625175262545_0.657971441746158"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.134f24bf.0","@material/top-app-bar":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-y+Zu5xon1bIdeAx4JKxJ0/wpsdbYoleyEYv6UwTClrNV3mN6EVDOOSE7WTFqED6PAA44wVFkVkfqZ0c7RGQpvw==","shasum":"f6ee9f831b434dc6acf1aaa7f687a071d6c9283e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.134f24bf.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kKJCRA9TVsSAnZWagAAMagP/10MIWiVy+zByNsy7cy4\nTzNo5R8F6U5lUpARdNGrHlQTgFIJBiEUNViCAV/Oe34rJbBVaeW62+cncsD9\nxdeVX41jzV6D4wqztZXGhMeZZulx639wz4CGbA+ImHMuceBbN5VsVqdgOwC7\n3FwSac1reXk85rTKIudpkUMfzMBz7r2fm6Zt1QJFp42DDflUX6V0+L4INAlw\nD4QnI17u3iuoOkgDsBTl8Hdoxor3uXIpmkdBrXccnwAO+qLeG3VhmWKv0FlU\n+WVTKYtKJBpXyLoEWv5NH/YbhCLpS1woL5IxcL3UKucICi+WVcn3jTy0LCLQ\nie4iTszars8U0KMJGcrtMWBa7UQv9YHNr7TDJn3t5/4yYBEMnKbfpny527IR\nNmZ49twFtqc7F+IFIfRHIZ0Ef3QDsIRbRwgYOXlwE5MylFBLztuqpbvph9u3\nOa4KO0jbOC564yP7dnQBvI2kizFY3YwHuBF2HvzSiomLq2LTJ11FhjM76xYe\nTX+GNZtKvUh6ODGNT8XSdsHXYTzx8yPqlh6XEkqXDOh1LKoawB5tMbYzXak1\nf+9lnd0J1WZC0UEntIyNyxBlUtpiZ93vQu59KG8ca2+c78yia9tJ5a0vDQOA\nJOC7baShRPSmeDgwpby30QbHh0ZOWmw6zktqle4AFjE3Xct0IgaClqJK3M67\nEjZi\r\n=AEzx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDShPrgfJiSUQW8drBxUma1pE4zh2VGiRQPySTMh3QxHwIgbr0na7IJEWWHEhvk1yqPGHSgUS64AyzTGeXb3GHmNJg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.134f24bf.0_1625178761315_0.5548182520516383"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.1debb78f.0","@material/top-app-bar":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-o1XvYHsMnhDRpgL5v4T6mX1IxYl6TOYpTPTRmnk7/+CWrwbcGBpKN+5fn2qkev7pYi1YiREhJcuV6IMtAhUk4Q==","shasum":"9a143bdb9646c0337a842d6bfa408ed6259cda86","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.1debb78f.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5PlzCRA9TVsSAnZWagAAx2cP/RlkZZqIuQPuN0k8zwAd\natoO0ZDHn759x/tyYFOOJ5hccxb//NrJ9+m8PP6KKjFmiVgd2z81H//AmSey\nL9KUvs+Ykvrh2xHS7lGseMu72TzX1LY6SMyIRBBg2wlOL7d4AyrHPpEqJEnJ\nHe8/DGShub4Z0hWrRBp1M+P9aeyxlCOsWkhGhusRmtvxiaTxW2Wqdof/70Lu\nXlAdZE4KFPooK+Y1gRn5Mvqg22/+PnLJi7TQvcUwFhoSGvblZ0ya0kCFFb6J\n6xpZO7grQBkN4Lk3bY2PWcSbOx19T9pqPsdHgHLIPcdlAnO+B7K7GTrWS8bM\nD4kVXaM8QZ8VTTiaTcu2Mmjz1ZshwFVl0CTpWGGfTOrC7+LiYngWmMyjbagU\niL9iE7gspDLepd5GC3S0dENYGUCttkQQ6EmAURNe9tp+8pF3o//Jk4jZ0Voj\nKxEPPLzSuUmjPzlcdgO+d1NGqtGKl8eQcohxXa+tVfuNHpfYOUbDV1OUJNN8\nGWSr1244nBzsUt94NxkfggS2sAN38ZWIKsHJcfTIJp4NUEQgyIFy75ORyG09\nZGi8a5YgZYCJbCJ1kuMC8+cNf79/f2wZMFxQKRc4XSJvecLl/SIfR07HWDph\n9kO+a9Z42+mbwi3UW0W0yj1cXqd+zLxRnLJPOeHWHZ3gTrioL2/icr14sodj\n5nfB\r\n=Aqxj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHfLtWOdqgiLsI6hCJlej70MwnlW+G/Z06W4Bc91tpBrAiBLMbgHYxUx1mzjkICYAiw6Fb9NVSCHeM5UzcRD7g8F3Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.1debb78f.0_1625618803156_0.4196926875654168"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.d53edeb6.0","@material/top-app-bar":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-E2OwjvOZTKSCZJY3BcfG8czrAbZQwypIrv97sDQb60wJL8ct2Rd55lsTI683d0F8KEPAK1vyCAoM1P0oHqGURw==","shasum":"f14bac4e802db8b1e3d67d3cc48977b85eb563b8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.d53edeb6.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d20CRA9TVsSAnZWagAAWcoQAJvgjOB5n6UgGACVyjo3\nf2N0phRRwPHUTc+P7LdTxMOa4cdlh93HOKYnFFdYSrHa7/Up4494dmen/ksV\nCjQXkOuzPFtz6afT5qYfwRgJaufbzxIEHwWWl8cqYLB3Lu6pTDsOeN49E4wo\nWVspXMzg3dLsj7sBVNhHXXxWnxcGBmfBnzeXmc+uXURGvveliSpGbuMrYa4e\nlDbvVuXanT3bdzRPdXh64i/J1Ho38V7Sc0HKiuQSNRfO1DvPfVmDWjkyRKEC\nt8v6WFXKIwOZZOoKeL2ryg5TD46GvaqdjCvVKscl78vBaYAwG6Mg6RCg6KRl\n60+o7zInUFbiG0io8DXqUt3SZRYT6ekNg3Xv26JxBius5kA8OmqbwgowhpEO\nAk8ds2yq+4xyFnO5oAyeWD3x1O+rnUU9yTV6o2j1+MNIjGtc+z6FrHnYBg+g\nu75aPWU0jxiqTSzkRVyFrH5iQB9qtzY8UxZVkt+zlhKJwBeyleuu2M1Oyvg/\nm8McnuLwqQBx9mTbPNRSe2IoUo0iuv8Ly4gaII8jwEa4wXLEORczmwHbtgo0\nnUsFjDPB80IU1OsrkgKiiA9nLl+7eq+Na4LMgZ4Q2IlPVNdQ1WoCAv8zeqce\nLbg+OwoFX5XLugJ9xygvRYhYjVWfQeRiurE38boFvtP2P9pTyxJq9/Zdq86y\nE5Lr\r\n=U/Pz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGp2yHqaDbx6deziDfGgukLh8DaRfWljMOJrdoC/UT4YAiBfgd1f8pGSty4cp7HT62dyHXbecJQ5LiJ/CzI4YOJ3pA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.d53edeb6.0_1625677236301_0.05456417758305521"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.2226489a.0","@material/top-app-bar":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LZsagVMtl6T4ZkRfe76e0GV4beP5Wax2kXDW8K4mEqnVtrsYwds70lxgC5A21arWK0p9Dmko1kfkGmWVMS7RRw==","shasum":"7bc56067a806b054457d8791c25cd3832626741a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.2226489a.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z2PCRA9TVsSAnZWagAAafcP/01zP08d6Tkfsf5VvQp9\nJRmoq5tPNAFBtzCJaRqtVIJnVvYYeHhbMoTubkHG2xK2KqWs1ZxHipdphORD\niuTwvvGJIwKj3Vu9Q7WDQIeXRfjBCEaeL2IhIEHFgld4FpqJBCgxybNehpiC\nfkARqYIyC2UIYfMOuUtgWnMPyScoTVqDjphC+T5o/oxIAAKB1aQC+DPLVT0Q\nOPRmQHZ029rxrcJfvJ+ykrpDbXjOkn3O8IAJm6kaASrMz9FULuvH838l9UEW\n9P9W7KQcUGmSPMZAihVl6+Dx6Gy+Yft1ckKkujJuhe6WIKkPsOjnkgn+lrwm\nkg7w5MwBJKX0s7aymKv8DZ+uFqS0ywbvh2ALJsCHgbOzpPaMYeNgPGm5JSPe\n4rqREIwWwpVWcBXflPw+nNWlJWGRTdveDXh8+tLzAhICyXitjce879Ecm+6E\ndexGLZP/bFaWo516dhDmBQuNx3iK/IieOJT4jFqQbud/jqH1NkKU9J/rM93k\nJJbE397ebdKAbrZGZg6fDHy1ghrsjqdMmI63fphmUvM7CTOokMW7zETs560i\nHRjiqElg9+NQJYflVoc0zpPJH2q3K8llMNzYM30Jg1rMUIyqFBdy9g1ItJWi\nCqOZiCeH5wa961xUR8iQeKVwXQvRJTqD5xhEtkD8QJbtrInEqRE8LQVMP6E/\nI2Py\r\n=OeEG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCh8STASFdbInFhyhM7GBAbgYTMBPLhnS5SL+U1TIloIAIhAOQ2uNQxTuRjp17J1kQ3VX/KWHXQcHO9hePBeVkSr3xq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.2226489a.0_1625767310679_0.8059070434029445"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.d4801c11.0","@material/top-app-bar":"=12.0.0-canary.adeac0549.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aMSWShgMlATN0ysfbPfGRKrO+dXF9zkVNfFA3PlogPJYo13rzeMsi/wbIxB1aslSPmPKMV5RJvSKcjH0/Q16mA==","shasum":"228966bf2e87c0d5149d01973c587c47f8f41044","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.d4801c11.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51n5CRA9TVsSAnZWagAAKLsP/2bIEYgSV9rH3Qy+wTa0\ny79cDISGujYg7kGIlixEXzl4qcwfZbQ6djbmS2qJET+pYjnU/GnSHksMqMu4\nUK8jmC0xB+Jbkk74i8Wt/XBLyxLPIZHr1dlKia4lls0wsb1SIwysKcVDz5mu\n/Q0blwmjv6+8jvjnh9KpJLI0L3y6NhGH8t9XdFKJh0M8DEfyDPKtWkBMaWvt\n+3jMFFXq9gXFRd3Y7YVWrLnBI2xzZvp4jfU7A7deC5yaZRN3+W0yayImVm4p\n/F2uVpZ836BARlYwzBC35aA2iHQPL99PWu02DlMRH5yH4dBlO9EbjUlG/jCL\n0cC2nZNLCcEjNopGf5OHnZiEj+JxcCIPcYHV2KOApI9qcDjgQwZo7lTUe85b\nE2DdE18MvCVkInkgTFKYfuTbPy6lmRGCxgtfXvSM4xeKOQCOJV4NJISjae3r\nhF4VeqpWNbwazCR/C93EnH48DrCXO/21OZIIxGMtxftppPYoSo/txnnj+5K6\naWMBwPxggnRG6bGR1RvWrthsoQ4P8aS2Ho3TbeekCH2E/s4BUgARlx54/a4q\n/EWsi0Xxqg8Kd+MkNFI395osfhofqFlPih44hh2KFbT0KC1VgmMddjs8rwqA\n3RLhEl6DY3LmHL6gYQXFPwZdnaGJdiCUz+PmJIdiRkkMoZ4ORXbz70VcPcaP\nBXEL\r\n=SCCh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCewZvX6IWkFOQR2xXasQ4GcIEjxiJtIbnxM/izRcuE5AIgCKYdq/EYIdZrFUl+kHIuHPtxlGw5Th9G9sftaqmlUMY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.d4801c11.0_1625774585197_0.35464012706672765"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.7ec5f2d6.0","@material/top-app-bar":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+oF4td2NLnv4v3v0l4Tgx9HTBLTC2QXuJCAmsPprUa/b0DvfqM6IcaVf5riHGgP21zCej9ilAwuvc70HuQFu9w==","shasum":"28a89b25b4b4a87045126f15d2bfd5d5d95a3454","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7HkWCRA9TVsSAnZWagAATdkP/1mEHRbAua4dw0cmEduR\nc5krRpWlE8d30CfTnUhkdNiUKFc5clFCwP18kotHJU5OREHKwdqiRTMYz1n3\no3NeFS9LODvd30xYynDG1ShoEjrvr4Byl2vNH1ad8nLT5uP47ju0vIMkihhh\nBbLwKCVBEdjW3CSskZxwua+RUcY7t1lcBqg5N6/c+l5SNYEfF3m71GLJUo+5\ncDVorKT2oNHc1WcjgbESZkTZTlMoM+J4EZReFbfqP0KpyKPQizliJ/c6DgW5\nQ/cdhISgllZNfMJzbMn23Pmwjjx8YcWnJ336c2w8cLfMOdlUiNRwdYW/J++5\nroN21Ze6wbFTAxiJ7H+EdDVdExXgt1qafqZJhMSP4hc+xHjWeeoVrfRqBCwx\n4O43Si/Ld6vL2TgRKPaXBix1cyRFVWadK0cvTPDhLKQ+1vJUgcxUyQRXGHJB\np4tHCKZEBBBOBxPxQtLbFjz0U7IIp6P6sWdK9DS4E5FLqw10MfRX4pVaHvJc\nvEAHQJz1V+PIGCfHBK67UCCnLoQYoVJAsES+LWuBhI0nmrXaR6uCXrHhBvA1\nxodPmvMOAvZ0y8249kbr8JTccUCLX9srsk9wJQJOxBp0LoveCnQ7VLhrj/KG\n0zWJjIsnFypcVBVFzPxV85+9I2zPdE6XwdiOh+FZholAakbRzI2OrjXPnn+L\nyVgi\r\n=/gHi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTCWbLvlI3SFTwd3Gk4hugU9FHMsC31IbNQbaB0ncy1gIgYYxQrYZLer9JstyjO14fV9IJzVrc8GhLpeuLab7matU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.7ec5f2d6.0_1626110230327_0.39249982290734553"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.86cb4ca7.0","@material/top-app-bar":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZyqvRoGjdH4ADDLpRuqLe0XHlPrU5Q6KPIu23QOL//o893GNc+HbqiXvbqc4sUAnRWtvAQDglox4tQlWvvfJHw==","shasum":"39489f6a92a4d6a0860499bf0429d7a5f99b19df","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.86cb4ca7.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c9zCRA9TVsSAnZWagAATOwQAI/CMOlHE34/Ul0lEiIi\naYUYeG1INuyHpwN9ozUXWVF2BK/VE7ukZ5eiVLW8OtrS3oGSwtRaMqmTnj+F\noN9LyZd/dfhr+IQXpel8NqZfYSFLyHg4JaIYEmsML3D8nto8QZ+pvpOUjnd7\nLWlapWPWzByXdm5NEDrU5B1UuBWqOrHSN+eo/jMMNj2qdWSdUdFQpn1jAn6z\nutkki2r3fwKvzid+ZS4n9a7sZLTDspNn/D+5Y/nLFpJsiPnzP9/VqsTDesWY\nyl4tNj/SFg7XibdhDLig0iDvQZYDC6kT1Nn8uDXy7Mvf8nQtvGkHUVjgepnH\nlYBghXNeYMZtbwzOk0mXEhj0lBgoazfX3E7f65gP6bnoHpb1JuAwXFhDAm9x\nPCj7rLC2Jtb/MkGrJIO6OZ5b9u3J9mXriOfN6pYHLuHgv6lct6JMBXU9Y52O\nabOnZjkOzfdgKYNEKig/Ft90BeoGAwMbzDoey0IRzG0X3wykUTl4Js9twRM5\nKnS5S+fBqPHVJm+5BYutVpCQkTvdaH8P6lMC7MGF2l3PfzktnmoMRc/OgK1m\nXJY0MIuzPGQh2ZdhD2XpoampldodnBhEK7GaDACejwT7sxXeD1/HG5GtUF4C\npj6tqXDFh3nfKkpkm6H2To2+xnZ0l3kOzORw3lCPkik7wkgl1v73dbEYqbNh\nV7GI\r\n=RDnt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEpZ6K8yt16dWZI+RiRXpcShFsmGiedpk8kX7US70kPBAiEA7iKX6DdgOXjF0exgsHrImRT958THHb9gdnW+9YPO8kc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.86cb4ca7.0_1626197874796_0.054082584499526076"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.bc9a724e.0","@material/top-app-bar":"=12.0.0-canary.ea77795b1.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Q4dvnYrXL2onx/i6WqXx1TE+j+JAEb7HbHt9QU0YNHZiEw0l2CY1XTonb/110/BENNo6q4V9JhXR6bperKzjJw==","shasum":"bc21b3bb205b2dbde3bdcb2fa3efb172942c4f18","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.bc9a724e.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d6QCRA9TVsSAnZWagAAgdgP/AjIk9VeW5NkG4m/vlQ4\n7StfA0wj55peHEOPrJa+0ksSSqyTBLRrZSjiLIf4KbkDb/ChjHhGWELgpp2W\nd7Ip5h0lSwkWdJS8rD3z41hRPUNvienIONdmX+YHwVTPuFOBtw48GJo0C7Hz\naX8LRDdNyez8jCn5aXwxmmLq/485ZXKQQZJTBNYvVDAtXaRCzY+zUUg737m3\nYjrHZJGcjd2ly9IZ9SnE6HrRe5x6b3BEOzVaH58RoLKqoZWQx9SWv+gh/ZTC\npX9clXkUfhSSULVkAss/r4hUqa1NT+E3j53efJSwalCrfSHNhZAT0oWWi/qK\n+W4/+jM2aiVS4XR3Z53eqtOSCk0FzqZdchQCabcmSKIQjJiz98x9TZ+PehBQ\n2VKGb3iUWIxbczYFXtfPz800W4fn9kcIt+HctdOn4WOmG3lPdntPKNwUL4aC\nYgTmvMnUl6kNIOvgFRmltlhg7YqpFwB918crawSjUMSk49GjWfup0AtLHqTy\nJVzIGALlhCxK45g7hip0xDDsD9i0UQdgIgxxsV1Xry9g6vxz2QGZq+EQB/WW\nWCbSe2/Gf8NV4HsOczeLDk2LQDVUb7cczdDKI5fsSHu8b3COihClvP5dr4DI\nxdD7FPPdGQgXBwfnlwLef4JfsTiKvrDbDN3Mow90BACzCXIeGA23AupqdRIU\n/4rW\r\n=gNhy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCTr7DKS1sulIMoj/XXz9tCWRyhXF7dqVj6LN9JEs/aMAIgGKFvKQlmYAMAvnauBWUou1OA2/iTOLqBgRXC0+Tz5eE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.bc9a724e.0_1626201744593_0.5305261113136199"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.7847b83a.0","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sKS0XltZvjHWiQ5Id4DWLxtkohNck8LjuXotHLtT89XHiAOg1rzxAp7LN6XBoCdzBBk3H4U7N8TPJrokVwpXJA==","shasum":"2a3966396e4b80cd137e427121a0dc4eeda26eb3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.7847b83a.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xyCCRA9TVsSAnZWagAAs7EP+wdL9Wpj82f+/c/la4Fr\nIIb1eFTbjeC6ShqRf5RvR7aSxjExRoXGPeX0tgjRf9NWJ9GHJgLYbBNNiLjV\noKMlToKAu8xA+i7JkZdbn7FKtG8HLGFNBFQXFGfqpZ+Tnal6FMMVq7oTo6Pv\nuiv+NDgaeBF4moyVJLpLAOAq/SMyLNwQi9IcP/a2pxM2wHszFI4jnunvJAsw\neWb8x0bPyRzB7O/fn3ykf8zD16qRzH8Ay6w9+LszhHRRcT0eiYosjLeJHfip\n5jKKxhnHlIT/XiPb5zxWBhrcb2uvgI9f2rM6fgbKeO49IqsC7E3ZY49+cIQl\nmC/C4NIVfr9FFjW1sIRD84LOzmbttWprjZYmeLRJ0uUBbGc/3X+ODqCuslNt\nMXrlHSdx4iQdclfl2031AoLLbnXcIR6sPUqk1JPC8jC4GPKHg8KK2piy0IQl\nOkpkAUYXWzMG4RB40stwkyAAPDtByLOi5AH6hf6OQ6wLdjqOOeCNNLj2FiwJ\nxFwSA3xWO6tQY26yPVa7N88fpmjVkZMRcHg3VuYE8s4dVGRsdAB7eaNKeEcY\nqGxyp5yCQes4mDiP0F6ZmVK4Ofj/dTd+h4EN48saLI834WsaTN3aRw/+T34O\n0f0HB8MyB4Folri9lPey3t2jTB7qwPCTgYxdvhOooLwzuhEE8Kw87nmQHHCa\ntcnj\r\n=b/Y6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0/Be7HNbT8Lo8GUo4s56MupDSpQmqsQqK0hvGy4fYSQIgOP4kBLoaOSS+vA76CPmgHym7ANFiu4M8mqGBqY0qibw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.7847b83a.0_1626283137835_0.6548106665471147"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.22.0-canary.8cba18fa.0","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1QiEqsHzpWnIVFApi5NoQaC1bg48faBUp1Fz/7jSGl2qjNeiCCKRNU6Mf4JN1JUyD4tVPkql7Rdovm6iqsYm7Q==","shasum":"7fa3e8d6d7f38d195e2e7ed90449e420b3b8ba96","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.0-canary.8cba18fa.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70iUCRA9TVsSAnZWagAAYnkP/jiydRXjpHj8SOaYtrAO\ngOsIL4DfVC7UbbYOQ30S6XLkYIg32tPDQE55P1hM8B2WHvElMs/gNMJxFlgh\n6xzYCMQs32vn3no9dlSkIRn5wRDqvFZhc8ns6N8J5ExEUJK4jK/rMwbwWvkf\nYpaOvX7miImuACP//e2TrF+6XEwLxhDVDq6deers+0/dgLlUWkaJxQ5BNPqD\nHX7zFJPK3wjY1VsDzmSKsFmsqqWzJQh76GfWb8R2xoe2z7tu3qIbyXcqRpRn\nRAgTbtkDwkShcEs1WKkrD1fM0rlLpMWjCCgrBH4b9QDHjfo8tbQ17aUOQocU\n921U1Y65aC+bcpQwIO09s89KN+hhkAcL8fmZQagiZwGv7YZDLArsk3gN2yrt\n15ihw0TJp4Xs0JPAvvaFw0rGWG2qpWogqCZWoRH0JQ+EDAO4yIk2PZdz7zZW\n3ML5QCdNiOhGlzwaYd871t6vyUOm3KyP5qp+sG1KrhZPi6j1TCdlnL5xIuYk\n3IfXM/BQ7A0hPwzjIi9mGQLJLCVzR7evB0W1x8ja1SIO5avR40Kb0NlXkmCO\npyWZw1e9Req5CtKHR9fHT0AtBzAnZfH8d+oa3fJgNerby4/44urt1A+OR1ws\nHVHoeBOjDaDOtynu8cxxJZAPhTch1dnk2E/LFL4QXd1gv4TB/ahcuklLjAl/\n8U1b\r\n=b91g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEw+wVHsPN6P2HBh9QrYHBmcxLd4kzCahUaMjb1eE60xAiEAmSmTJdoSQmBydV8P8CIYpv++1wT4pY7dXAbFlX2C1m0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.22.0-canary.8cba18fa.0_1626294420174_0.6171122342345172"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"^0.22.1","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"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-fixed@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-ZpQGKmqmSHp1izqX1U0S+3E8s5xLSB81cjFlQPFKG6arU6TO8Xqyzd05JPfFHfau5aZeHQuJB0MOGN2QT31UCw==","shasum":"179c4c0edfc74aa0d4829d73e962409dbc50c754","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.22.1.tgz","fileCount":9,"unpackedSize":24792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72rFCRA9TVsSAnZWagAA5pYQAIaCaXJHp1LPXv5E2cgZ\n04URkbDv3tq1DnHtjMR75CHTwOukIYFkbd54hlmNOee4ETi5dKnAFO+qIldw\nwqXApCYJ4rTDjMjbGG5EHViPxH+rVlePbzlA5T7Zsm0zLNxeh3q5tTQSMJe7\nYcrtmtcu/PdKfAPCs2/4+CcioB07hqYvMrejAfjRgRRPW68vYeU8sjf416cX\n3L+ZUq8l3YCZuT9tW/khC0k4LAUrbP+HkMvRCPxMZmK/CocJo7M4oAajgx7Q\nkGatvygWxjFC2aIz9egIiHkCRarnlNZYaMSlpTAWbLp3fceasB2Jrshr2Fxn\nO5qo6ehfZ5A2WmaRZPmx4RiLZVEKb0s+TQEqSHKyUVnPKFYZpxfze/HUmqRr\no3z1ip/gSQr5Xc0HCeLGuuU2h9DTWAbc/YNp/y4ZyvLsLiQMIP9LujUF5uob\nuPim7gpXFkb4qdBwJ7A0NWO2ddOnwDkCIee99ZLp1T+Tk45qq0DLQzK8uIec\nwAcWkGNkbhLxA735D9wr3WufjWy9hEZ0JWziRc3gLBgwvNT7XpcCGDyS+jci\nSV/H4ARx6ubCNDN50aB2w9O0mohBK8jTYqDJKZhXHYi+26WEGbyoovk2RwAy\nl/++HyNgGaVaMjNPqE7VxBq6plt9d0jvOlPYKnEKFWDfjK8dicR8miyMH/Oz\nhm/u\r\n=dbZ1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4+yvMzDQn8Jx/8ualf2rOc6YGhO07+Z36nuVHWjctQwIgdb9pNE7Dah0f4JyvW69korNhwaCdq2tTNDh7C4LmkVc="}]},"_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-fixed_0.22.1_1626303173078_0.10492734906212275"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.fbc09b4e.0","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gaTAJLXvszVuvhbCGfm8F79+6epZxoK0N+dsP84+SpO8+POhsAkmMOBGTq8C8BbjhvnOJ+ytqF3NI0vFov37JA==","shasum":"7c05f1e1d15de919b7c2d048a00cb7c8e6bd1946","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.fbc09b4e.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72siCRA9TVsSAnZWagAAskYQAIqaPGtQSqJodl/qxYPW\nA9N+I9RUeeCg95IIVaYUC4hLhpQEMjWKIL3Fu+PuYiY3GYQqgr+W8a8sFpU+\nczqA0MIb2SBl+FvMgvlu/+O9MlGJy4nqO1ilAfM4sM82v4Ry4LMGAi2q/HF7\nd+O+ewadgo86VcUpryxYZHiA21/izeLt6RvBwi0x1JJgMdTggtEMb7n5eWtv\nnKF1URdMxanbOY/UBiFvz4Jp39DnH+POrGnMgvj8CysLWJQhkXX21WJeThEM\n2EelzzWdzLBiquuqmPmJTXtW+/iKoMfQtPpk41nMcXAPRVTnUFozPuIm+0AB\ns1QmXaCx1cY6tsXLqwlgsL6RPAGmvjzEHWzb5+GrYPUr1KVFWoi4Xy/NL2JM\n+1gzyOFOR29ZgHAmc2BWC3rs+liMaMJ7y41cpME+0slwjIUR9st/QLS+dG/D\n77nHdZ4L0036CDay7OGZNuSKWXo3MzJX1SthRLuRn4QPXZFAjTe6J/tYbJTT\n+DnB+jifUAOVsPmA8QOsAWAAF/Q0iQATD1dknxkzSzPFGcQBlaGIfO+58ebc\n59TNlPLrmXJ13TlZ2TJHL1IClmKlkOk3mXQZFB7mx6MCUPgX4+ibwOgigrnv\nmfP/CZyIARY9f7Ay1cx74+dNFQ0Fhnwc+uisbi188Azu6z3Qw8is1MdJGCvd\nquVX\r\n=OQin\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyhHNEVAeshOCP+l2N+9G8k2Y+cCCI730lZ2DfFiirmwIhAKrZQHxS/AICgIy7oPccjeDS8HNsX5qN2GI761l+FBa9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.fbc09b4e.0_1626303265592_0.593846961962905"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.73e9f83c.0","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-B1/m25kL/PyStJTO1vKU35o2m9IahHXx4yaBI5H5zPIk+BFp68L7ZfCj/dry3fz2LeGFncmg8Dcjo7SCWjGDbA==","shasum":"e6233651a27b2217a2258de4c76f8b8d9cedd88f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.73e9f83c.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J0YCRA9TVsSAnZWagAAMXMP/iAzIyk8aSltYZVH56bs\njPbi7Tpnt1Q31MchjEe57PAD3jhdjX/qRV8M/WZGpklAoBy/y4hf0JLaT+Xn\nqJ3KXLqDVPqH5fZEZCQk7Y93Blq950E2+KGv3Hu0H8qtYcKizkVRbDpH7gPO\nxRsVvzB0ZBgp9Z5ABBVBBYbN00G7Lf5wuvohlCQB6HvXssmAX+kHsrfYOBkF\ng/A1yUO2CPijK7P/6yuV9EUBsVZsZEBeub2v5HYPgZJwVWNl0Pnp83uTEYuV\n+a0YVVm5th8947QGw+3UQyUGdTnSyCQkNMYTIBl3rkLTtebIfwHFXYl/1P17\n6m6ZpN6QOnWUg3/+MK27gNQrnB1/UK1++BBvIQmfIKwMcCzXzK/NS9UEWyHT\nfT/S9mDxbxa7oXxNeUxRTV+6mk2OxH29BjUkxhYDnX4DLegZH4+45xTAXJZy\nys6EXUxLb+4ecovAp7sEKPwAiTsjPFiAsWrlIFNDkPvIs4jmyiqrl0XPz+qc\n99jgXqQtimX2xCGq1u1FlMCsE7yQlEW/VqIh6eWxt8Ag0Bs1BzECNXYia9UX\np+X8sje53h2P56mG9Zv49KTe61hFw4Wr3SR2E4g5aU+rh3qg3FqxHk8d3a+A\nq2SQcatQFWWHap4YyNiXG/6VamaObIKNPvPpP6thHkKiC38MMOlwBQ8+jrET\ntnPv\r\n=S+vS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHKj8ErGIp3fPUjD0u4FiAYFZmJUEQCIoKGfDuY6cSCIAiASwal+czpxRZetlBbjFpvfrgLg5LFm+Cw8b7pUmcOhvg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.73e9f83c.0_1626381592587_0.8427634981587317"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.cc0aa7a9.0","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JAIiz3GIaDovhi2bJZm/AqxX+oO4VVJrIhcb8MpL611BRkdGydOarDbmYwp36VSIANXP9+oVZtWrCEtWZoXzYA==","shasum":"50f22f60fe7ca91a5be6173e784f9d1f73c1c475","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KLDCRA9TVsSAnZWagAA6HAP/AqQTwlm8zZOiBnBe6V6\n7FZ8JFhs1fCHuG+aEw4XhaX/ABzF34RQY6TmPVS2PL2VpqLa6eqzh1Lf0RKO\nWfvOLKmtYN0Q/wHOgZ1Jaj4cHbPI/ko6zBzOH8a/VQda+0MKl0D4pRpfIxQj\nEzbdXtNrrUAKOk9zlp9iMXze1sLFkD1KtptQ+eagtthGIYjvFH7YHzYY4mwA\n1lo+RWIWmT659Ayf0NG3+Iab74qyi47XLdocPmh/0X4TyWF4qzreInIn7aIR\nkEsBsX+A/SWofrOAX+arYRYxHKLy6leY787ys+d0VDGhmBau+oh1QBYHFDQN\nTGE9bwaBbjM+o75u4CfC9smEc5L0lB7Xl4paTJ5Sbm8ugoTxFnShxOlNlAbq\nPppvhtTODRtoi/u3vDJK/+6kB8o6MTprJ9F0EiDPdAQ1969w7uJfAqmJxv8f\nEOMC/7IjiEGcOGe6w80//ppGkZw6dt2+Xb1/sQPE3gV62kbtAS54nZ91XUyz\nNFp9JpwNAc9I1UNmPxkNhSDlQrIlGtRta/rSlf0a9KvElwtrpy8QyxmaFJ51\nNtHomhahWsBlEIxs5ZjQgdW+ohZU9dOW+1k89ZWP7cVt9y9c8Ou59DxXDxES\ngDwfu4XzZSPO6Coht7gsFZpPYp3VxDGjUVbTAA0vVD2LA7kV52jnM2XC9zGb\nlDgG\r\n=NO09\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyZde7gHhOeIgblGvfpRAzjolWpXykGYSNOcR+C+teUAIhAO9DKX7eIGl+6Vs54EwfHqvHtlu6xtKYI7R5PsxrAKhl"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.cc0aa7a9.0_1626383043845_0.8599644391670271"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.a8fcac45.0","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JBAMpnq7MnP6noSPtNpS41EQcNsch29lguTbR0fyZwKfPWtGVoMcJhGYVIUy6TRXePTJZvAvAY4m/RBpiWdb4Q==","shasum":"e75d2bcd61f48fad98626a15f83bca786beb6355","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.a8fcac45.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KcxCRA9TVsSAnZWagAArVYQAIrEoK+kjG0fT9s5vXrr\nFS0PtUhllSuCXg2OVYZX5pDbRK12f5M+s6C+j4+0ova3GBJVb1PVLJGVFRaT\n+GVFnEqsnHs72AeCqv+rj4PosQFEhPd3w5a7e/1D3uu213HyJrdkfygS8pcK\nvyePgMA3eGozFg5amR4kHsey4up2SX0RjWExjO3Jxx1iTriFuW3UuLQ1O4Pz\nH/OO7hhkmfcbMlkVqRUy6bwA4YF7bGi4WCs8DAUiFK1Fgscwv+suY28Q1QXC\nvLcsad5VDerJZ/AsZnwN3INqHpZjcPzT+DkEW808ZjIRv/FlqZU5OOgPwTXO\nOB5eW1FzfSyd2bDkUW7XRl1IphVU+5JJfTAmsufs41V7NjtqtOe3XfGWy26c\np5413LR0tXBXFJQ3uklfZ6qjUBTP5VoPXvNLKmVC58zaZVrYUPthVodusfPz\n8CouE3dRhacnPWLCvP9DsVVefQYa1NiqJU7FV5fFc66V8uigIJy/TFrXMuVU\nWmfKJW8ueQ9zdGRuxEMva/km3wagwNo/8Hi1RBLTlXb353RvwBs/rD1ejFjW\nNc5E5rFT0wGLhcDYezr9zVD081yJ9St6VG4zearj040mcgbo0ocahVeY+DLp\negZ0gUZ4d1JOVrq2KlTmQfwWVIGhrRE5rFf8tS/JDTzpnyI6C5EXVktH4fOS\n/llI\r\n=BGes\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDicRxDtx8MfagcsahzRo48zN2dNNelGxQ3wDvBOHy5AAIgEUgkcDK8Tpw+bbnZjHwyi3edts+95ScEShENkvFvXug="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.a8fcac45.0_1626384176978_0.1126187595329915"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.3ca580d1.0","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MwpbkomxJleBq98T4qcAEK5vibTQkeXWqJnKQ7ICMsuSjN3PzEp512G/KqK8fXHmOf0XjomAg0eON/VMKsh0jw==","shasum":"701ac24f9b50b360facdc0c312e5a0984f4669b4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.3ca580d1.0.tgz","fileCount":9,"unpackedSize":24827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LDmCRA9TVsSAnZWagAA6fAP/Az9YS2G0kYBT+rv2x56\nT85XYvRiceo1WGOayk+RLP/4VoPro68Oc2gGs/cVam1J94aDn/uNToFNTa5n\nWaUP+Kh9xNC2cUtFk3F4LyTLAojPpkUYKTcOx06QNo9yMxU8zv7EBaFE0JxD\nIexEKW2TbnAcar4bEX4MM72CJhnrxR2dt54G097Nq2pHmxAcXiv/E98oHc1K\n0gOIl0qVNWa/QN7SEELBiJS7c2tMa8ReItbyRPUU5it9DYXIJVmm1kEgap51\nYVpcjIWkKq70iLfrJd1dnP2n5zu5OBk1ypwsNDYUyXKILY6WEWGlpv51TezZ\nCxWluaiRH/611xvSb7GuNe2Hk3TiDLo/eiJeFgzhTRFmzt/dcdm70xDSKMt9\nX1/freMvye5b5DJX7iJWchSXwQQHsfLG8yLxMvh3bY65N9lT3PwqOg2TMiBr\ns/ib7+DM9cNkknQKAa7kAG362i2pPV6/bG0aZfx9FPDl2XRwzEAhRM7J/Th3\nEkdf0qb7+grxamXGRC4Jh4YJpd0KOL5YrpeLGof8EOb1XJ4QdriPUyrTZVzr\nIH9uZyknE9iFIG9+WkicQwPzBXCuyQWmWjYn6t7le5Y+J2vIRgSYl8V8c2zO\nngL+b+iHzSCUAtI7Cglxz72dUiheMMD0HBhlAMXcJTfSB4Z5JpEy1lNxOBD5\neOnU\r\n=RCw6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAkeVt+0Q4CWbpGACBWSdQNFT42z8pE4rN7fn726nImgAiEAi2J1sxApV/Sz8Ch0VeUR/o7jVNGfTkK7IzMzd2n4qd4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.3ca580d1.0_1626386662549_0.6472962074628597"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.9e41cb2e.0","@material/top-app-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-600ttbfXqKMYcivZnha7odmGzBEzN8HRYTb9vWhgJoDhxvzlW5DMUnpcq5PSu2zNHpDBBWk+qAPw+csdaIBhTQ==","shasum":"58ef5b35ede9e4fc4efe7ae0e4690fc86224c16e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.9e41cb2e.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8MAYCRA9TVsSAnZWagAACTUP+wYvr2WhOKNim5gs9ATm\ne4wC0RtRTKmeeEolUXxnJTTA1vBe7x7MUmAeGITLWwfK1qDo0otCty81lhER\nMVmcngdPL59YEd1ojOENrZrfNnWUrTO55KZExrlKs7SSmTCzTM3Qsm9yNMfm\nT5X8ZcbhnCy5aXfAmvze4GMszH4eLO7Xs9BWQaNCI5pHnlzDR8KJY+AtUK20\nmiQqWIKO6eaE5ySJtlY4O3dTTFfOm+9zkHxXkb9/VTJV4M+UXKgyYtb7vdgb\n6n0jEy75If2exR0V6Q4Zjo5bo/bx1RAhxswqiDzXFXrVTT3ubNgh1IEq9M7M\n37+Lu2k7KNddsJsjLd/8yv1oSNWN85GTB0RTyBilrODUoRbvj4jlcUfTjids\nV+nF1yG+/hMMj9mdnn8J7j/xXMZfHNft17uYLkk637UCqMY6Ac/pFtuAtVUO\nwDXwub3yadwidQOqdxW6qXvZnMGwdxxZ6rxJUk6SucMJO9hLlhq4VTdGafKM\ndDdORev/kL0HwIV/nR5YdAtnUrRGSlBwn9KAzi5B/q3NlXSOv8CpVU/TUP6f\n5MaG9CFZdiEzOUleYMNLYjtsQLzZ3QzhGIrqHUmWxmUkTvYXBnh+9Ntwc8Fm\nyjsIAFxTNw40SRBPKsJCj0VvBmYdSqAsr1//W2iz5Nnk53HO697BUNhFYLLG\n1piY\r\n=IyUi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDUEnodDvUIbGbct/GCgotByxBQIDEM78IrYozbRi7lmAiEAh6Y3MZzQmzBLB0gfvRRqQ3QFcrpj/oHMf4L+5nqJWAA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.9e41cb2e.0_1626390552050_0.8583693474225347"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.c180db74.0","@material/top-app-bar":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oCGxZXjbm2T4ykG6hUK6Z4V06OaMjV+bTLa/M8Z3N+Y0LD/I5OrwlliWvHq/bbigSt5GyGrhsEJuiBawKwrlOg==","shasum":"ae061d3c454a36cc8b89da89c146d0037d5badf0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.c180db74.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cD/CRA9TVsSAnZWagAAPvkP+webj8tMy28/Bsp4FZpk\nknxzKEUlLapPC6jG38wM32E13N0TROUYVcNMFQxCmUmB6VZAHUFTLdpZ13Zd\npPfWGq/ehARiCjprErjmVRQxv8uwdf6/LuY5pkFXjpKkPc4dVFWcoZu2eMYJ\nO3jfkQ9tvmg0GdyaL18rehLcXVmMV2wqMkRGHywaHGl+U3kANDY7CnvBt3nt\nE9tUvlvOXHGBeQl2fehc1CCng/TlHgpLMQBlLmP4M5DLdewMhYyOERrM9fa7\ny4NF3/yUc34q9EI8B8n+mbSrQryJgVdbxYhZsmmaJZ6oRYTgFJFF1TgcJf+q\nknpZCR7kgaqg1L2GYsrd7tNJ8U0iGadzlDOoG+vlLr101wCFoToMEulL8FaK\nJK6i3nJ0EStPc2R57fgQ+AR67+tzGPsrp8OMKIDsxE7ltf2beQ4R695KYbuW\nraCZ3P7gv129sJfov1rvNqY4BJUTBlO10nwNloF/qzk3lJoKDAfj6Wbp587O\nblxQFxP/IsM4RP9jn1cVYBGpjpA58jSSmnu1JSks7uq9FaYtyHGrKxOZmm5K\nOabz1orW/mhx50t8CyDlcgfWu2JybbETTVeehMdUI9hHBKBsZYFgM2UlaDil\n7lJ/A2UFWQYKWGLuRzyauuURS1KsRK9PXoV9yEQ33ac4dXm7P+Q7oJd6u4kU\nZnsk\r\n=7fF1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6yCjFch6bdCWz/PC7ZLRKHtw8PmPXt9hn9Ao1u9IFHgIhALiy4VsdvgRco0V5ovIwHdVMGflP5R9QZrWrx7bY3xe7"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.c180db74.0_1626456319638_0.3637325681394892"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.0d0a9267.0","@material/top-app-bar":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/CM7Gu9aZ9AoogLWpRTnAeKovfbRKzW+KeBFwTPhvJdIQEqlg6/yj1tSUwcP49yt1TW2dTnqRXRvV69fySpnYw==","shasum":"57854891fe3c103c110878a00e4d495011dc7bc2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.0d0a9267.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8ciNCRA9TVsSAnZWagAAvGAP/16XAfhXT+CaatrPInqv\nFjJ6exgrKH0TtKeq7eTDAum+4oQm4kKHDFlZpm2lo+iQFl1brvhpZg7+XHB5\nxjaN+oqZzAWkp4+7WcHwsuukHR6tbV26vQ/brCjft9D6nL7cl2A2jLwJ+4QM\nBnvGXH8P7QN8DKdMRJN0UaPegq5Yv0lR+/HRdF98L0J6SOUYEB/W8iHVp47E\nzu3xzF9MgWcuvhAbSWOEgJItAIAJLCoof8ir1oSb7gEK9exV+jQVjT6kF4CX\ne+FZbJBKOFfwF7w/VM6SWrfZXo90MYs6qsfDQ9KF9aX/9iIeAmo73Nw1kGFg\nGV1DKfsE1QaNaslCYu1eDeEV1EO1qGdIa5j091e3AHA0RH/1O0rqF4/Stw4J\nC7NVLNsZyFkeCbklxoEBNcZBUZ1vd6DPPgRiVs9BP9hcoTAep5ZuMx8YT9Fp\nEWidpUv0XQNKS919n7eyPCKXtuH8VNW3/GZa3EuSnvvNaIukZ9iNBQNaJcSE\nFbNuHKr7Pi68UgIf36vQo94dvCpuBWhAv7t+K3yedY3uy9WC/Gde/QKkqOpM\nR09Xdm1zVPAPflJ5wCXbWu9NWJBB52/kmGkIj263MBZWTEa7FnRJ66q6UqnN\nayKqlQ5e0zJTb6+5Yhc+/wwdCUvwElNWdUYzrGJg/Bp0cHw4YpavxvWFXT4U\nS42V\r\n=iyoS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3uayyb5JKjmQWLpEbvwa5IuuyqFKmdef9fx5CjyOyMAIgBnntWP6o+8PZNwvXSh242h4NfomipkJhfkZqNiqRIjw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.0d0a9267.0_1626458253045_0.5343482057742388"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.d234ec3f.0","@material/top-app-bar":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mwqizcblZsWx63TaJjSfDd/TA0wxvI97zassODm8sDt6MASUl/zlTVf6WIc+/uoYkalqFz6+mzeBpf3L8F7jww==","shasum":"05fb40f37aa1af70562474c5cfc39a40703cfdff","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.d234ec3f.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8csFCRA9TVsSAnZWagAACucP/0WubQLXiy1ZelBRBVee\nW5OditqwF5HQZnhTyiOdblWO0hsLCBo/0x8sFl4M8yrn6kwQXQqkYSJi5+k1\nTb5vYIgo9pjtgICCLi0rvWSZP+rCIddTy153R7K0D8VKP2Cgbm0ZgUGdqVrD\nnbXH7MWjIb6Q9y/qTakHPrmGUz7SoRlqqm04EhSOVkWFKNmwvZXGUfId8MF5\nnlx6zHK2OvB+Q/RkYlVVRKZfdXjmXDajQHJeKbIhFzx8hx8sJQ+ycxs1hecz\n7cYIiZTx2xgbsLrXG5FMLPu1AvMM9Is7GRjzEpAIqAYMoSpUyWHz1NzcmSj+\nS75Tj705h0sx/uhEjPKPmy/mfnvQm37vbXhG2uUWb/jkumt3qTFEGv8+c1Q7\n7OM26S2WId3QTd4t8ILwb7e/mre5jo2eBYfBoxqrGobhvqT0Im1QNebFPlG0\nsCY1YOo5A7wfR1TkEkTyaySW13y28H6UX5V7ASxNv/HBeATDrdZXzcVk7D/9\nkZt1YcXe90U+BpdLZrUr/Fv4arp9CvhofTI2Bt5ec4PUj4buxpJCUs9pJjtF\na+BUhZovLy1hn7c2V6kaPu7ybrB8+gx8ScR4xUYnj6UxW5QjnONBRn1Lw4kb\n84zTFk7zvcNQ44opcf0IIY8G7TPu3AbhQrz8zlR3Ux4Z6MRZJqzKop+aDR/F\nkFmr\r\n=Utui\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCdfsgxtK+CxwAMlsuQh05PklyzxQG9I9KucvDfhU0pwIhAN+/cnu1z4XGFzHiNk5Kfqa/n5GTn/kkVGgUSe54wUmj"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.d234ec3f.0_1626458885555_0.9969207128759388"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.5cd4bcdb.0","@material/top-app-bar":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ELFMhjVpL0fPoJwiDkAtCxckMM3OM7Cz6TipUGZgOZe/0aN9vGnfO6zjOBInn1N3i6o7+SUIYUyhQw+UVnilRg==","shasum":"f041c4659c19047a63fead890c3451444a9a87d0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fY6CRA9TVsSAnZWagAAHekP/343yis2myvz6/zZ2l7w\na/8xsPjaOweSM7NjhPv+4VL8DLHnpIw445Nm04O2puCMKwpL+2ghzhKYZfNx\nG1XMdLODEovROxdmfAhDO3vwEKBHIEwaP1RAKzJWPgcoHYc8+CTxNLzCXPvs\n/BCAbjoX7CUmYIKgh2ZhgSIsBXxUQCDuYC+bhdAwnIjT7VibnKYdo2xrWnhd\nJ3MYtxBdP/kcJKwUncpuEsnfX82WX6Nwkyp57v1feg6hj9b2sTj01u7yfq2U\ncF003/dl2rEGrhAC/qDM/LPc/HB4B62Ofjw9vk9L2IGgQqhe/cErFeQXAIiq\nr2EmEDGWGUxoQBvkHy372WMwthnKXiRrAHLv67eWzeEAgr7pX0KHTg2ssBv8\n5535b0JNvRF1TO1bqAHzEN0fsp+ejjyMu0IbSafrqWA8ZDGodeWl5t5948ei\nE4r3GstN661scW/WoO6HXUZYnrm9RpLSkuAl1fqqYi1z/FbiuQ/TYAGmn0PI\nfqkwEWH7nBXkVvNHMoAToK7joNr7a+7bN5FX7hoPQB/nbcZ8+OdF3g6aopyD\nQZ4+s0k6h6lxvSPlGzGmp9JXIk1XdKaN8z417b+Ecp6W6yxivvyfsOFUYvG2\nhownvP8PXJY4D9GiBFm5MJxyTZdXXmF5h4/lY19VKdqUhQMQHnHQJDqaQHGw\n4jnP\r\n=HvsC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBznuaG+XKUIn/D5d5J2mstuAu1JTVZK06WkKGibYWiwIhAK53CTtv4GDc4esZQmL4KrCse6cPn7U5ilNunCqNw7ET"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.5cd4bcdb.0_1626469946093_0.1369032393290026"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.2b133cb2.0","@material/top-app-bar":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7uy8hfKWYgXI4SAYez4ysi080zmjvekHmHG9/816qR7VniZzMkuwaARn75f8l0LgetfBvA4VmdNpJDC/JUYEEw==","shasum":"d72e2a34d96c0f7a18179a28fe02775c2f51ed4a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.2b133cb2.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gL/CRA9TVsSAnZWagAAdrgP/0kgIaQr6jUIPir5Uo3D\n89/OrDwGavKGtg0jsvdgArhkksYwmY7Yvk2snbUGE9WoBM0p6r1NIezWil0d\nPP3EwcWZz/LP91ykkNzkr17m3yKlNaGL4LVzUu47rBgMtG/eoP57RpLJ8Cgb\nc11txOLp3h2hDSywN40j/uUaXWNPlxTHRsHlG6oRMFVt/WmFFZdEOvCYZmGM\n/QmQty0SvnnPjUqY1y7Cp+jh9eUxfYTg+gkjGtO2Xqeh20bkq3IqesjJKrfe\nBP8L8Hzo/XjZrPUnf6tC87UwO0kJsISjEVGHPC2WSD7wApeH2V2dOxXDq8En\n5+yi0sWtm8iUOTLVI8t7PCm4v0bbzvIAGWugHBFOMVh5gPIwjdOEY+ajCphb\nsRkRAOyEbjg5FePZmq/LpDrq8ZfhvHgHRsAQQxxQ6lJYm8r/tL7lpUNN4veb\nHrMjKwupTNoYeNR7Rfkgn0s1oNXb4Q2zlbFmKrBVmIcGupDAHv6QgrUNDMaJ\nQFMt+CWOA968MkiNq6sxeHeGU+AdzF5dleVKHa8aoE88QAs/Jvfm7btQk+LU\nUFmLCA/Artpu363HKudZsQmDf5cOgczXkwCV7+lIBdMzOKZpwrTEaSlRFBPN\nH1c4VCNklLdEoZS6IdaMNjMvVwXPhMWyuLcUSDRqqUrWcwTFbos9Gh+synBd\nK87L\r\n=kxWq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID1ntfThA5sHe48Ip/NGxCCm7KzBC0IVuOFdIo6/+0e3AiArLYGSHFRTuuXoqeM0TRavteK3krYpXJHVG43g5F9XKg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.2b133cb2.0_1626473214867_0.7050446289799577"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.ae4f422b.0","@material/top-app-bar":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1xlMUcmnNH0GIKBsVF+5hT2Mw1jiFCQr5CR2zPWBW9yzK14Ffyg+VekoJeIM/C3h9EnCxOkpZ7o4MxK4lHbdrQ==","shasum":"8a1c0768ab4f4795333d3867724e9b1d2e44e571","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.ae4f422b.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hwwCRA9TVsSAnZWagAAVTYP/jEfpec6HlER8JACcXv4\nEohPdOVJ695BI3sFlVCaQ/CV22z/rpJ6+/2EI5IA5hdG/pznfXQjTfTB3N+R\ngNhzxACbQHMWyppPWuedRXQHwmikXF4Pi5FXOB/NmH7mLXMhr6YNFKO2jnyH\nJ9bWG5RL8ZuxMI9XH6BfUdPBGqnw8XjZComU2p53E2dHvWU0VBWXlkSmsRFP\n8C5VcWJvQnQfhg0/e31B0wg5ttPjuVH/nyehXzJe2rFYjJ434sUTNhZ3QDkv\notuQI2eRPWy8PvqVsuC0nmLzSTXvPPuFO4PrAW1LCIySYd0q/Ii0ATDuNBMU\nRFv5w/ZOkQvP82lqhpAlUABifMdniok+x3bVlLOC2IJsHawTnfgKz9sbTzor\n3QBrCBuqHQ7ysip/Y6WkerLZV556VsUxHmiiTfJTZJpWgL4uiaJ4sGnhAoNq\nvwe4CZSAKsvHIwU+0axO1EofMUuQNpVXm00Mrjynq0MRJ/Tu/24HjnyvXqXe\nsXmzHMRP6Y2dunbyUXywB8d+4V26J6ZH8yAdsQGzrdgVIIVbMkdoSn63fjhQ\n+qE7KOf89rovrKPb6W+a7UuFrxk2r42DhMjWlbdBXyt1bS4cEVi5lZhSMZzG\nGkxAh2s7lXyFL4+qmS26ybcl6pn4sGdYiKv9jnlNmG2MpB05PRROy/XyQF60\nHYlQ\r\n=X/4e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDW16yx486sXlhD1YTQQReJoM3jMlxI8h/OCz1X7UmSEgIgPNEq9fO9ds1jrVuzsa7SkrtkvEYH9iCa9TRIMBvItbw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.ae4f422b.0_1626479663957_0.8503046024377705"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.90ff8057.0","@material/top-app-bar":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-szTx12rA2+30cdMWa1DNZVFWXjH/feSQITscjsiWWOjycIiDvmvrddg/4bqWZ8SD3mawVRn2H5Tj8y9bfk1XIw==","shasum":"6323681b36e5ad01d54e9291d807ef9d4e934e98","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.90ff8057.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9YdCCRA9TVsSAnZWagAAEdMP/2MistMGoDSE1baziiTB\nswOaSZXL3+ac9EIDNh4XmJAZPYeddZG1vRf5o44H1U04forPPGo+PTdtFQWM\njw6B0QuTprxuwI1tOsIxdKXEBpM8rUQziHtYizsn7WhzrHVEryEAUaEDU0Wk\noljJDTFEkVIACa4yT+lq/ko0JvUSfJEvrw0OuDwwFwlon/STOCRhyPm2JiEk\nPHjIYM0mWX9vlTpr1TWTj/rIsV6v68G2dEstg6lzCK56/I2+IaPYoz7zdSgL\ny9AsH2wk43MHdzHoWxX5K0xeJxtC9gztJLqdsDsorQkP4AVv5deEIH5mxTi0\nyFKimSe9cXDy+BAbMQhEjNwA02iIGJ4EFyLfzA681ss58LyYPZw91I3N8Auk\n7bLzmOCy+arBjh82Gj97m7zYxWKx79P3bC+wL/nYLmi72AGqpUkKAKA4W1gp\nYB8AdJu48dUgfyT+/Pq2AdmHXM8R6TvxkgvDIPV1iW4jkW78WPmJ+5ZBMDNV\nAhQBgWfrRv/3p0jv0OIbclHR3LJsc79fIiJ8Z9R3ztztSYKrj6kApvHM7Chk\nKK2F5AnYRs2TPxVB0sVfFwYsi8zMFFgKmeSaJ6ZNTjBO1o5GJnU+V0iur/68\n1fpyj+dWuo4Hf2srH3V013q4iw8G/E2AHLbv1DwB1XhQoJXK2Mi/l6jTCuWG\nzHuv\r\n=EE5R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEibK2Y2GU4+12vRQ1ZfpAeO8e/dh+BQgR7VcaLou6SyAiEAvEkKP8RuXReu6hdNFqgMUmReo6NeBHxk/FUFlbxl98A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.90ff8057.0_1626703682605_0.48955965848327"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.dd7b75d1.0","@material/top-app-bar":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qWfbk89UQY8dTg2L948Wfimdc54XAZdmJMoQbTNB7EE3P9MosnbCg7rl4kdLeOaKaNdpbTEJwNQ23bDNLRI6Qg==","shasum":"60949f5c10529471bdddd59f5f8a10cf9d548cdc","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.dd7b75d1.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9buICRA9TVsSAnZWagAAxzYQAJqwcFrRI9plY4Eb+w4G\nitOaJe5QNTFxqKTxWkZ/dv6gEygzGhs7erRwDlMEHi+GT+i1lnf12iOtxf69\nrkPdF64N7jEMmRh81dmHAw6AsWtRKsohLysTxhRPZajr4T0cGLOFIs0kOMWV\njX/QWUkyFZhqHf6P/Ft9olX6ADhZ4TA9Ecs8NgjH9VLlO+LyKnRBBjwxTj++\nha/pZQhnJM1GmQ1TPHXXTQRwqfZLZJ4AODGdvQo5/4OjeXzA98UvuA9XTiBO\nd21C9PWtbAx1795w7p4lnJtgQpD1/H6JWvbJMnObpJoHDCNotJx+ousfy4TH\nYlnP0NAQThmBnltWulNNJwHV8zOVPYP7vB3rny+DRFzoFmLn7VZMi9NtwLKO\ndgs+irKpd6b8nJKXYROsV4G1PrpT/CvqusHkl+KL4O0tKMeWxSf/6ZS3tZCe\nQOMPip6NV8SQxDqkcLD4rmJDcVeUI0UqG7YBioxZxTO5C6yB1re/Po7293m0\n2TR6gHRclfIVZSovuTK6efAkP6o5mNEM7YAyPoXiw0o2zaZyfioV4RB/YE/s\nomVtkya+8i7bB2Z2jQesW3g+Ye+wvHnrxaWT1QWKa/iaSKryfe3B25yDywJP\nibBMI9LuppC51aMAqo11IxYNKGod5zLateRWXeO+4alqrwTLKJiLTJK6cnBN\nmVue\r\n=jIm4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+p+Wmr1gWWx7l01N2W2+3HtvCYnUX1IgZLQR/QJxAMAiB9WbyuLRGUodc58GOgagvKXySZLljTuQJ4HaW7lIUtSQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.dd7b75d1.0_1626717064150_0.5129838386261687"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.104debd5.0","@material/top-app-bar":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RxMcfE9i4ykCjIJmlM44iT9XjUAUQtZn6mgsxffZpBAH0UjmIXXKVr6MgBeX/XVfQ0xmjQGC0LyePVQtuWJhSw==","shasum":"98c1044a7057f84d29772a1a55b2e43ba7ac7e2d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.104debd5.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gKDCRA9TVsSAnZWagAAMRAP/jlYoW55doH+cfQuGUEg\nH8ydmXy+f84aeRu4VBvAHKV/6zg2dPR8dCO0UlpfZsKKSwh7lNidjmG06zrt\n2BEGVMhXc7PXTqCcVRHFVKsWZVZIYtkbLDImRQqsKFY06lA/jcCer6tW0MsX\nF2qIyUPR8gHYgWt7oGOdlvMt5UvqY+wi8yZgiJk03cksnfHNu+U8Q7/6cmNm\nyPGEo7LP4fJKxh5JxF3Na42B6ElNlnck5TDq7VDnQuWgIuXF2YpylkHKL5CB\nVs3ERmU/r1WPXst1CtUtTSheWn5N5WCX6+A0dc8RpHYx7qLg6Cc5lbpE1l/c\nnEol6VABbA5DL2PeArIh06zPOZxn6+lU42IK2CrEYToPY76POXWFtcnCUqUy\ndXCVsP7cjdrKHAu9C7XEsMnwoot4PWzF2p5efuvmPwGDI+i+j8dS2RkCn5ZI\nXBkSFJzs35vMV7ikyPahJrBjpXlsYeXQffDiIeWorK8C/f9TgGHcnw0mniG1\nSz3iT83JY5/9SIuZSS39wQQ0FBrBsNOa5ysQw+0kh2/Of5gFAk2trUIFQ9v8\nBhD9yTl4Un3afvCFvJ4LHdvrh09cw0XKdIZ1vpxL5fbFV3abjV7V+/TPkdyW\nu5M1IMi5np6nGc4PmwxNUKfqAAgxfvJ2KBqdffxdcVoYGkzZec0dV2ypGJGg\n9OwK\r\n=BGop\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzGnZVai31mVWY3SFGvXCnOSiQ40OnX7Z476z8X2klpAIhAIyLB8KVRMJ945Tz7kHMdIT8QjMZKc/a47wA70H/kUXD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.104debd5.0_1626735235397_0.13297496780234708"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.4612705d.0","@material/top-app-bar":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-iI7seE89pK7ZDdc2RoEB3JTKKHfWZWksKabF1EMzMs3b4DqBs8IHi0skBOssN0QM1LLLfA3k+30HOP32sbQn4g==","shasum":"1efdd51f667c52a5bfc6324b3a66c1d470f28e7d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.4612705d.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vQqCRA9TVsSAnZWagAAIOMP/RmMMRRpNLtZ2aOD3O3/\nTVgU6L/5RZIJrs98W0dXRBGle5tE+3462dATBrYKdEmxLcSNgbEgru3RayHB\nBOcJ4IbP+p/a76oNl2Ih8nUN60u+0NDtFPpVgpaFQ2GPG9NgugzDcyYuRp40\nzKXvyQlNdjic/NpmNdNs/nt2mRbQV4hdwGnNV408E+7wcJp5nWpxbNHDVept\nVlYIUFImXELI80hXcBVf9KyZRGR+kqXPRTP26DP+dT1SI6EF+obivkcZTZY1\nVuaJ/Uy0XqXwdgppXwHJT/Tru0st1mcjdJOS7M8bHJoXAUorr7IVpnaMUZCo\nBIakodi5k0SAUcjMw1+Ij3H//7IFOH+m0vFrmhoa+U4dSyysRcwk0gcFhFFC\nU3czDvJnGAnSNZ3zx2TIODsqcd+CjPDNVCoOzmiFbOpBa/quxhLt40Gqxgh1\nMsDovkY+RVcB8ugKzvrIXdEJd+7Ce4jSrxXqwOJmIsvty82ITvqqlsqr+mKw\n75NmePNxRXxTNM+vOWIg/c50txhPJ50qzPwAg8uSsAWFymS0ctAAIoSkbAOi\nZj8rxhDrrW0Q2koynX1/hHRI7+nRbVaW804QeYMb5tpD9gW0GTmxX2Ipu2Jb\nHWnClP6usejpb5JNXwuf3wZMRuKQBLjVK4WUSKSDcnkWXR/x9bxuq0MUAo7Y\nXua5\r\n=2z4q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqC38q9XN07+pg2MpofUFxG9g/1vm21Kym9fMnl3MGLQIhALX7877GNvqG1+Jro/IMhwXaNcYYkEINygaP+uRk0jKF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.4612705d.0_1626797098236_0.31493324724220884"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.b36502a2.0","@material/top-app-bar":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-op+dh5e7n2cwEKIwJD/vyHTOCTz1sSuN4UyBRyhofYsEHz0iJXcw9xXAMGE94qz10e3v+LteqNh6CNe+nHa9Hw==","shasum":"c9f197b0e108862e897516e10d92b309e17e28cd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.b36502a2.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KEQCRA9TVsSAnZWagAA2FQP/2KwduamjTJkRN18gtrj\nMvoO5UveHSorLXXefBDX7JSbUDhPu2wPsGlbj1ZPU7xeGVV6plhizFz/5vUF\nTT/TVfRiQroXZZaMTSCFskFTQbRZfAwB6JxAlr3ZyHIgAw6fcpBNHlseB7Ej\nCZ61bv7Nh2xtrUL3uXn9ojoRLhX76dSYciV13bvQNYCdVzI9uQjxFhmN14b3\nLJe0qD8/cUgR6iPM4z1ydYcIsTPgdAW+8HqYf0j8y8mAmAUO29pOQQu4j/rK\n1YjSLrn+eYs0LrmZZ5Ci3BCUmxkfYFzLz//zcFliMuJkADIOa2Yh4ltigZ1O\nMuf/p4TTL90AZS16V1GYgt3eXz9IL5V1FuiFq1mJSadvCEbklr8Nb/kyuNC9\n66oNJTklwpfJoZenm2ZYC/MSWgBk9Gq3f/wrS2Zx2rtYZvBIHR7c+Vk/i8/0\nUJim3jujcDqM2OBb+BYclpyA6VnNkhywksOkart2UQ3Y43umwkfThAG/IZLJ\nj+9mNY3tVceK/YimCUlkxtRPhJJtK8GBkcQYkTSfP9mEIkg0u86VLz4USgOa\nzegG+ztJGxZBuD1Uf/+VGhdLrx7dkGq45LXYf07KRUhIci3tsxuBvCFe4bYT\nHpGWJYrUzkTsMHOBSQoxChtVKzHr9Pp75E+ZEaSN6XusICkGWtMpc0tBvNmY\nJNzz\r\n=W+VO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDliXho9ADHdZtBzes1U6ocWvPTxQL4wKQzSHKHMJSqDwIgenCIXrp1oAvoUZ+wHorTPvV5kWsSuUWJLN/G38TyuYw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.b36502a2.0_1626906896387_0.5779654583986191"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.2c392ab3.0","@material/top-app-bar":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-sr7L97/mnzNTPf5CHjZ/FOY8Wu505/WMakPbW136H5WnEoRK4AXrF8pxa9A6GWnbZlKpRxd4rbVgqp84lu5uyQ==","shasum":"b5d5af81cbf0d82924ec98dc4cc4b64485094c6d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.2c392ab3.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YZcCRA9TVsSAnZWagAA24UP/1wGQj7WEJMZ/2mGWrLb\n6tSBNbCVIFaLWGCVlJ/vz3Dpn2e12Z1XsvkBwDFKg5VVqLwgOp9LSS6XqYC5\nesMXMx/W0m06KA9JOB5dHdSnH3leG18vwUBaqRspbAvyBo9KDU4BTHgvr2kp\np+z4p2KOLWRyus1HFnPxXFlADz6hBBeoVq827DenacmVp8TpVeODhUKhMpBt\n4cNxunWeV8DREr8n8NaE4Mx6Jpa1foZRDDcJCXbX0kvELrz2kgt56RrhIEXD\nW6Jsbj0MVwoCX8Dpri3OxUOv0BGkajsFONUT63T4D2kwB163KHJEcpqAmdro\nm1YwT9XW6/zrPysisKeRXKqiZc1QEJ1o9N+Xy0z8DLyFS90vU9oxrQHPtb9d\nZ5q7AUEKhPz31V/vUm05aIurNhR7aLOsD8SI4xxjQDwRDoDYf/k65PgBDk4R\nNDVOSgNkbh7HcjPoXEdPcGpOntpOYkRJfU6dwq86d6ledlolC8lWihlCpMay\nH6rFmpSwUpC1HgNHIP2OU1xvSFImWmAuIYARPY5VzZ+5HYMZhGQlZ0kauYox\nuSMvEubVx0XRoktHNq6s3h3R1m/V8bvxEutHegFOsD6r8M9gWnmgI0JPetPx\nbi5vwn7Ob+0U2SMipSiLk9kDexcV3wzsH0OjmozN0/+BEBCnG4ZTcuFAKGRM\n+9SD\r\n=dnNq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCP9inlH1o+AxFedtNAXLE+TBEC/py6w8pgo8ihkne06gIhAOy8l3XZ3vedItjh1ltYaIt1C+knf/9kS/rpdG2bIcRQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.2c392ab3.0_1626965596266_0.5665671419790184"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.e8bac95a.0","@material/top-app-bar":"=12.0.0-canary.5f00e454a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ptRXLxx7UxJhtIGYNQep0ocJIKYTn5YiAhqI9yy9Pya9w1uVnI92T7RYNgDrFdqXTD6fyJtdgCa1qyu27VjcVQ==","shasum":"95bc5671fb0ffac70de129ace1528e4f93556a00","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.e8bac95a.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b6YCRA9TVsSAnZWagAAEcIP/1dUzE9ldjwQv1qrCMJc\ncpApxzoOoUoXjkafDIRBDpJR17MVlqT4I3ijZN/2hKh+yPh79LQUelT2gWw2\nt9CHVZwPNsxYFEojtUBbB7KXXlSUUiI2PacHr0yQ+KXA992+MsqVmEKWs3Yr\nUm+hPyr/+t3w2JklnuNdyRTXLJrPB1pB1V6BCPZDSRv52wNTPUiMzaEXY6+K\nCkvlvI96TmL1jLY35sNZfdbl4l/s1gu6Ou5dJrCKQtl0Ug8i+0PdO39Lwz5P\nKZxinfsMBbLj9bdvmY3gPQ8DTD8Yj7rniKY6f2jeMMimB4A8Zz03A4/o/TQU\nT+V0hP0Pvb6nQWwK+sb3eKYX1f0MTg+VlE9vmXyuEn79142QUXUCEf5c1L93\nCWW4CJlswZxbMIUzO1PYtHV1JdxWSI1G/dmKo3KpnAMKzYcvc26uLuFTOCct\ngi9sTMkLEj72mIqaCWdIGGRtuNZ0Ztc6VQAgOcB2w5EAdEnpkRnFYouTE7Bx\njJdXgfwkI8K+ERBb6thtd3aO/qoiOC400rVylaMDl4q0fJHhdTqWkqONBSqw\n4tqF4IPN+JN1RH3FyFxYbKiqxcVcWZwc3o5XvHGW2acRANs1f2LNGp9GYf9h\nSLfcfgEjsaa12M2LUJ+iaFBpkwsPjiejCTnoKN+Q/Xng07UuMN3Folwqb0b1\nQ2kT\r\n=hVS5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICytxkRWQ13Xu3jgPXuRXDo0wvp/NWlcZqeQTDtZ/ep4AiEAoysVFxF7nW21MghQrlqmczo6oLs05BeUiHdon7YQvyA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.e8bac95a.0_1626979991863_0.7576439935534289"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.38f29f8f.0","@material/top-app-bar":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yesZsuBL9RAI6e9f9CiMstqGg+Iq4nw5useArAh0I3hyc9T9qLZxsNytOQZfsjITr5SI/Q6RSNgZjsSTO+1zhA==","shasum":"8d456f10985c5683dfc643392902e697abcbd351","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.38f29f8f.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wd4CRA9TVsSAnZWagAA1qQP/A1p02pFnOPToArOcCyL\n36bB6e7DbVz0WoFWxUGdqsbM3IgElWsLGDpU6x2z//fJDTwngS2GoKdlnt7e\n+XFA5OP4lDdLOqswWJQz6Z79Wii5f4e7Dyw9xve6RK1w522TscO/WDrwbEeo\nZWfsLmBHo9ManSaKmLFUBUwMJilXDaIVdKy/wfn8/9/D6i5czRCPGmoTSTOh\nuFcLK0CZa3Xanv0Tw1ZVmx+OR2Q64SNdFzxhJ9eOc2Awni2XGTQA06+q5lsK\negXfFAevJ3MMSJqZn/2OeBYlDCagbrDxDYviOaKey/oY7a2aiw/mo6Sn7IZM\nDEanrLgZkB39YXDv50rJ2vRH6suptJoMqgPg7KbLQ2gn7D9fk4eeqpDBVCA6\nNQHNDo4oFOyIEsiH6DeArQ+cqHoPl302gbSayxvI7g1JuCfsCL6E3wwb3yye\nTusmCSiicNNp7Vk2QQlu40z+hM1AMiWs3RyrLSbLXQHAFZo2v1brqCCc271e\nRdIae6AoitCsQBNrmtx5MoK76Dv7m37WxeIagb9irvFOCcWFCNr1qParb3jo\nFo+Sjv37GPRxcfnJYjMzmM8gvJ+PjS26PmYOUpccj163ZAZErTpWhSdLc5YA\nZvhlIIrlkyJAHAotiferjjoy2MY1dnf9a5FqiulH5oKlfXSSbJnRue7rcrtR\nDaD+\r\n=e4vk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3ax8H0R8hWOtaYKILQXj5lSCvltFBfyxrMtf+eMT1qwIhAIExbcfH5TjRbG1zSHjhotOozNub9uKQsbm8x0ftfhm8"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.38f29f8f.0_1627064183953_0.7573225646234898"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.e0693475.0","@material/top-app-bar":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-v+O9ZVtmtcpkHZ31vwbPydm9fDtGg7kxp7HpQD9kY99M4HqgUoOIdVcGOdE5WxykPOCgmuES7hxuLN1245OWkw==","shasum":"f7b1e1c40cccdfcc6e06b42e252d5d9bdd40ca0a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.e0693475.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xDhCRA9TVsSAnZWagAAq3oP+wUzFqNIzeocUsJkXUhJ\nHgeZD+wUqIFBckes9i1elTDAxmWVrse8Ja5/uGTRDSbRWrGmnNoAiXoqDfkA\nVDFaikb3OkS0enRXjJptbELyIplxNElbvoyh9rZ3Qa/GjldcUHpTYMlG6M9L\n3o5xj9i59lSA9lYAeMRlwoPiS5qJdQEOnkx94azgxGrCsaU9XIKwixr/WXyl\nBqosmSwpOX4+t10/NQX/6vpDFP9BfzaQPI43/FCyS/z09bbqzCEjMyVuYSYK\nMqo4khsnQJcynKvfwJ4p9iNslslWyx9/WZyQUVaWG97WTL3leG1vi11O1mci\n1YEV060rC+aK7z+lQMZXh+dxVGBk7Hm7Gzp9sFDRZ3+JLJJuUug/E4gB+nX1\npwy1JCvzvbB0B8VLUjDFuZblPM9NkEv82bhUGK348Nd5yra1pa1OwOh8QZ2s\nqvuxGm5U1rIEBdEOwQMpCrvBLGEuWpaetVo6Pr7bT1EReyHrnIbZ59psMc/9\nSCwO64tNM47D173i1iQp9F0gmmpORozLvRyEPZQUrxtkbW6d2Q/k1ED7ihHB\nVhBaf1oo7u+u+sKktqOeLKgf20cl12obiGX3DYxZwuHvEAtrsX4vuq60TXuU\nacYYKWwyBAqDm2lejZxDRB/nEp+oyhFIUCBSd6k+80vbIFCI1vT0GgBd6eN+\nkorN\r\n=Gt1R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZyF62zUWvbu2vY8OmkOds7QgnYLRw307KRH/zneaXBAiAcUmmg6AA0kgCSEZOcvV4hgC5zyWHS7ACNWJHAv7eAgg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.e0693475.0_1627066593652_0.5550564682796812"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.d595e030.0","@material/top-app-bar":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UO3qFCTDrGnh3KekR17tYsj92U0hehC+bQE0jhWxMyDJrMvSRLJ8CQ60THfA4buKYeDnYYwOrhGT5PEtLuV4ng==","shasum":"1d2aac35086b17d905c9523107d8b8ccf432e9e4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.d595e030.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+yxNCRA9TVsSAnZWagAA46cP/2I1DKJsMATRoWDhO/Iq\njetO0sjjXJxgicPCiTBtFowH5V9jgv/fzdyYyGK9tewwK893KGaL6gFwyWH+\nNDO3VMKim4tFdfWR/oec3bMOyjdQsN2FFlwotkbzco1wrtmmyeVOpqA6Nd5g\nA/2XRomVVMxhLrLjRD9x29Bc3uRp0F/nLyVdoQ2zK+2pNbo2gu05QrYGiDeR\n14fY/5CXdTRwWGAKrfWlm3ZQ4WRslRZsHN10n9Q1eG4MWQRFKcdmePdvWOUg\ntxiyyXzXjFhO3RZQVJ1MCX4DBVGbasQOWutkii0g8j1eGsIRuLP9rvTC8uX/\n4njw4CUb5Ffoy3uhaxNVeqqSMhOGF3tGzMWbJv98St1yge/aCUFlZ/6Js/9a\n980lMx4shqZSJ60trt3pSwFOd7ErqlpQJgU6kxf6roSrocXPXjVY9lZzqEto\n5muEFs/ip58dNYJDHp+gvmsdn1qrLWCCzZQjJBsf0xNIBdJj8xXb+ZlBGVlJ\nAWNdR7k4TMfe4Euc/Pe9k7ZAkoyrxrs417Nv8U3ydC+rawjOSO23xyiH5gNb\nj7fedsAXFZnUctDvo5KSiJ83yka/OaiCP9/NrA7dpj5BEnyC2IIHNGuqsvGr\ngLNmOsl24A7j5qMnBbHTptykhc5al5wb8o5bhiqwM74IfPBFwb/r2oh0o6u2\n59mr\r\n=9SSD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+uZvT/v3Nuq99HBuOnbNyD/qAaH81TCFqqvxXNmfuGAiBtOYjXtcDPF+EYlVlamnjzGQVAtBd7Fp7GA3VK9DRKog=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.d595e030.0_1627073613529_0.18152505828113918"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.fe7cca31.0","@material/top-app-bar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-X8XGX/GQl5sHXxLaQSQCKQuVVXRMqJKruqY6/HiBsp1GO7slKgsmk8wVzm9qLuGZcYJrkujfcLNq3MhxgZ7TXA==","shasum":"faef7108aa71b2b2d98de6ac22a4eb86dba2dabb","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.fe7cca31.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+zszCRA9TVsSAnZWagAAzgAP/0dmloae9LrzF8SjitgY\nUQnhF8XI1qxauw8Oe4bWlBlnPRTD8IyeE1VV2yXHe3U2ti5om4OYqQI2X2jj\n4jP0deL730lY6hJ42LbRVmuHF9FUZe/+OESouL1ETQ9tZg7e3C1EeJy1HJtE\nIFvpQ2CEbknqkhVRCBAIQzkKiQf1r2DOw8g32CSO3xS4rtfZfViDFhHOQuWq\nTepNW8Bd35CMDGxfKQWPWsy1zjs4yGPJQeXTxGwYnh88Yvaqk2g9rnZGfM1C\nqyOgyyCHQn8jAT52wc+pMz65zYvCPdPMLYWcjsxAljkmofjhVJa426d+gdI0\nk606NHMl1pt218Fh9KJmdSIs9ws323AY3mKvKDvyuMaIurCh3Ct3TWmo6UYs\noxWvM9lV4CAdotB3v6atwVv8SxqR0MtMChFxxEv06RYckYLtTgPRXdqw5cBt\nIyxi8J9bYQZIx7ZukOHZKuxFrtyiyst7O43fy1KzDIoLgrTJhCUrjwLgTRTU\nBGdhNSLHVTsTmVJng809nNzAbPvMq3X0jt8ZATEIYbh3Hf4RkkEkXv4CC6eP\nHoczZp0V6QN9bHTj+yaWAZTnOXCdyZLEU/SjqLUtwbl+cx9CpO4tWv47JfdX\n18iPCTJZmT5eMiKvdlDiI0tGtTJCGjdfzbaLGiYOXrlsA5gEV8iQPCruRp6z\nAnia\r\n=ChWl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBsJpMb91crIOSfg2oLKVsHSYYbPwXEgpVQSEf+jHdP/AiEA3W3VkL4hfehLIO9gMWLX1FU7T+qOQ+ana8a9b1AJiZI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.fe7cca31.0_1627077427233_0.4303847664518441"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.fd9da483.0","@material/top-app-bar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NqwaJhZgLB1wezYpImHgOkeYVv5q6w+tRiZedwzHmVqUCZ+5uMMw+BdE3EbrETr2FKFVPQrFRxQSPRcZwnxs9g==","shasum":"443f363e087a6e893ff2288efd312243d6f26453","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.fd9da483.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/yg9CRA9TVsSAnZWagAAezcP/3SG/L6/sLODnF6qeO1f\nP8WFDdXt+6m3ptUMYUXMPZWlmwGTWhfiPZNlAJsyGPwZ0QUf30KAR0bHQrOp\n11Xv+9tfZWDk/a1eUgzcyz3zHP6ocrTuJL7hNDvhPOGt/SKb3wCLJM5lI4z5\nsnH7BR8tUkMr9X9HsowTEqsAD8obxbRTYSkx7T4UBr5aiysX++YY4Xx8yX+H\nJ0y8nnbNNOZLuS5sXfoh05STW1WY/dKO+tVBk23rrzhUE0289D5sFJRBYAcW\nLd/8WdLpUG/zqvdZvjh7aApR4E2vE13gUT5SCabHK1Jo9uu+3NlbMZxeCoxG\n1yJtP5XXDY24ZBM9ZBxqN6gp0Zkt98NiyETJTNHjaHV2imjXsDDBiNSSZZNg\nBlln/yTKs8dQAyLwSGGvmboTxeLzhyboWumq9TpB27yOovRLrME8eFIa10Y9\nLK8UzPosLjnELD99DmsmZMZ5/kDK9a10KbCeg8cN/kByMMFD9FLgRYMDHjvu\nIpO2RBfOJuBBt9pOXgwcwgguhzElM9TpwOzdZQfR4R5PZGr40zEawXuRqr8e\nxEqGcUo6I9gyPPJKP133VTzJscYrDILJa/bw6ubJ2mRXfmzjtfrAD5TgEMCF\nkXLl8d1L6Ggf6ZZhOCPU28wYLNycMI2qWHmc+9hUxU4fgSCByg5D+7VQvE9E\n6ahc\r\n=d6T7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDhUXE585oWpuzH65dplP0sCdPOqKh7AEAtj2eUFymNiAIhAKCuaMdChzpWUlGeUy/qPp6+G46qVwHNoOR70+xvMxut"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.fd9da483.0_1627334716884_0.17982331518319117"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.8a4c7e06.0","@material/top-app-bar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KV9E3qfN7AXwTVqkw7aFb2CzqhpEDaInYOKnaA+sRI3GJCo36F0duWi4+pF+QRPD5K2c5WB7LpGcT4u2NmRy2g==","shasum":"ad2238777d5a5bffa24d5a5fd91ccd1306fe9993","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.8a4c7e06.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zrJCRA9TVsSAnZWagAAqoYQAKDs+lnuJFZqQE/2h7qw\nqdAYqL5yUIIUQpZxGb72RJVMeuOQ4McR2MwMaIXtVOmiNdL8BUk3H06CxmG7\nGTyb9XAM0vnwb6leLcFu+m9e84Qgn9/rt2DCSnmU3lBVjfCb6ffUb73e96Ao\nFxZ2l8h30AGgBfloi8tWJ8J7QPyi2M4KsS14XyhzPD8fzuKUDN8xmGeihB5t\n9FnBmZIWGRQKAr7A0KYb4YJYnyJyytelSqPu+3WwQv9dp4Xa61EWC0es+OBc\na/iO5UF11Zo+wLo5TYKOPQXoZm6y1LU4lHG1kpmmVv2HRyu141YBe/OduWIx\nKMve9hx+p5VICPWNCcYou/YRY/eUczHU31GH2Yp21lswdftTFuZOVYR815U2\nIv1xJR2lZ0RoFDykg9HV/F8FYdajx8ryrL4UU1LucWgaCKge9UFR/gEh4PV/\njCNlCvHotvhHO90QRXJRYAyz3WiNd7gxUGg2/z4gmGZ02ALpg7S6Du1eYT79\nYHo6o1ty+tVlMZW+LliHSIY+heBg1OYTpUeyG6U5hDYcnJxGToqJY4IvBOgL\nQWsIoi4+kCUBGRg2kN4H4yrTC4z67qAvyO5zkqeVXOnTwNObwoeR7DYR0LMv\n6gUrs6aJyzq2W8PadPgxlmOe3Qk0WCeDG1RluLUKQ4PPydYFW5me/A7WRJS6\nANen\r\n=dtHO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDNkuC9qLK/BpWO0JtjeQ6blnyWyHuFjFFToJsypNXBTAiEAnE2WAxNHI5RsRNOrf43fWnjIFWT2eTkLJnebWPxDBPU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.8a4c7e06.0_1627339465703_0.4753859310974735"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.5b395fd1.0","@material/top-app-bar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7bslCvh0aDBq9rhJ+G1pnXSNkOy9zDadnb/m/Kdm34EBkOsppV8Bp4qK5XTYmfxTStrcQzgwG0Ok518Ifu7zAg==","shasum":"abd25491a9111959a9a47cd8c94ce36072767ecd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.5b395fd1.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI5oCRA9TVsSAnZWagAAxUoP/Rd/nzcRnpJSNO3R6Mj2\n5QA+Wafts6TGQ7k2/6CgmiBMLAJAvrmf/kdpBLyWW8OWKO99R+cey/Apw3qu\nyfvxFSKfglXnQFxeBKeN/3KmnhkAdJTX2J5awmFH7HOvcxKhqYznYTMGpY4h\nylpNr8L/yBe3GHIhKqum242I0Me8IRoGM335b8AeRJvfb6HfRGNCp6NxAs5c\npDkjjnJtK7lm0GGr+kWltvyoTHVEeusKROc6/JX7GUlGkkJz7HtP47gnZG64\ncNmO8KqRV100tUaMV0c+ECkA9pxm/lH1HTmGGv8pEWT+UllYoX1Kjzu7G+pM\nt1DyV0RmPy1+UAktvMkpowMjtKHM7Pys38bVwhvtzeRE7crsh/GjAW7Lsbak\n5YgcWv1NI/ERzax8ZFMzMKw+1LX3H3DKHndYSrv8CSXhXiX9hMtw2Q/tadS+\nteY6ipk6DT+DAINQREOXRUiG+V3whox5K3cOQ8+JZZZD1rlknensIUbeLVKA\naJA6DNAx6zplt0X5sz/kR5qMpH7m64f+buagNWQkqwvZBauaeRdAKZeQT5/V\n0tsF33Z+Ts9Kxdm8IBwr39mMCh27wctAH1rjnX8tD/7s3ufZsPdvwBOCHkyr\ng3Z8IRJrqIws6k7RuBPLbrja33gMik+tyYoBNHpZGCtFw4dUeKSdk0Z5CInS\ncYHg\r\n=42IH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICGLIvxUtohXaxZmirr9AJLW82nzwtZXGcSYS7e5vVwwAiEAuNV+/4/hgfxFtiFxeDNz4fOyccGYy+2KF47A+f5fY4o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.5b395fd1.0_1627426407920_0.8362681132382661"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.e5efdcc0.0","@material/top-app-bar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-US2akMp9P88z74xiIhn8kLb7a3+okBiIBOqBHk3J7HjC4FikLgw8JsHQSKs5Q9pD9h9wm1fVdQKQYYtFWJpQnQ==","shasum":"21a6895ecc7d3740df0e9a2ea454b7891e43cf5a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.e5efdcc0.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZJxCRA9TVsSAnZWagAATCAP/RrCRihk2JKSXA830xiB\nu9QpnD/QS2FPweQ+Jy8b+YjbMm0+sGnFKwUXBMYUNuTJ8k+VfT2PfU5GmKXD\nkLYHAPD0USvr8xplSQ9feUYL7NHBon3fwsfEjPt0MluZS8ZG44YI7g9kDd3D\nz8btru05mI7FWjtZdMCI9wrI8VDFg4MieEp+wfccYkE0ngwTeqv/kHWnFs+k\nVIATRg9zh9qKwyQZIh7FUHO6zFp/i/IfXNzSjOn+FlTc2JRoGzC/bNaTUYrb\nTEjQV+Pb2MYdfmw4/1su7bzs7fv2v7YKCGTLl4CgvYHq5EnlH6/SiiFtcfSy\nAkU3MDTueI0hS4mWJoeD6lWbZXMVvXXQF6ZXIb5semH/iGg4HaVhxcPCn0gE\nmLBhk0AvnB+z3eTAVI09xyhsZBlEaFV15yrA1nNQAEjKhmWPOW0QJV7kAzoA\np9moYWpbnsQVe5eEPzju6Dlq72xhrwZjLjHeJ8MvOw/byFn6kc3swZjPGwvw\nmYyE2u2lxmLlwVFmDIGy3DdFYxm1bPD5dTnys/uPxbdhM/uNpc0XzGEgfeb0\njv5rRaYI2/t23eHLraRu8TuV8Kpm/kmCP4anBBeCrrndNwm9mnpYr7h3cxvR\no3h/+CPr2l3vdILdhYQKed3F9JVrLtdtzMqtHArQHUhH/DM6lg1x+2chApEh\ntPas\r\n=U8Kp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICF8nt2/G2DoswP00GYyT8lkY47NzeOz5UPuQ+SmVW68AiEAj9FRwBXTPnJrNIxjSL8DJ7p+QcDK1G3u1ATBt9JEm60="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.e5efdcc0.0_1627492977535_0.35253236063004145"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.ab310900.0","@material/top-app-bar":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-G8F1cZKQPzsaO/7hjcxzrTe4g7mFHMTMibtN1rmPQ3Zhaqp0iD2HyDy3bEYDIcre/MS9OZAHGo6UZpCpSJBTJg==","shasum":"9bee1360040d12905034e658855372b8707c1c5f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.ab310900.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbxXCRA9TVsSAnZWagAA3GAP/0U6DcDcqW+pdcbMnP9N\n5XrKtF3rxmppionw1umYtrL4N1efioFMZRcOI/oobyvgFyyTy5/F0DceQmV0\nMIbgHid0TP2GI2yCDZFYb+3dCLM+VUQfvxRrQ8K42cAcfz8dzjvkh0KxBmt8\njZg5dlEjs/wrenUgp72QDMKWSf0BU9NFUI4lQmG6XTfKo/70M3mG6k9DaLSC\nDid04W14PBrHdNwW9m5cpCEb97jItV0yoxBjA0YPxyKIxQh5k823b+vQklWX\n66coQxZBFiz/JbcjraP40oJiVQgvoXB05deT6VLKua6YNz/zvFwjorVykYyw\nHBAOfvGdyegPdupgodiE8j2c+fXcJ7uLhtbHGVDLzCrd9WCgt93OCiUezHjK\nuCKukvGaTBRnq1KBiXBYkPsRzTnoHTNXDLQGviSudjwV3hHwyEDVjZUtulX6\nJcVPwcs+y3656i/4qJf5rrmrzAozgg+ecgsBp4ryBmJ/hmk6tJbxrjyxq5n9\nF96mE6XEr3jlWc5K9S3M0WWRUVTZv73f/JdRdKEtUPcCueDJmgaGCnRA1hFf\ncGxyZJVEFQL9R1Y/EGkZ7dh+RHeTmMr1kk5YtIsgkA8Km8PhnsTqBYIMDA+A\nDBGRMQPToOhyF7TUMAWKcNrR25JEc8FJhmsh9ItSz+uf3lZU6gUsWNJ97LHq\nnfhp\r\n=Bqzp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEAGPgVWDq99BC6YfJhr2pn1diqlZJKkBiFI6liXsvXwIgMYkIFJu6clGCBiHKSAwcZlGHQzFYsr2IRtcS6Ulr2sw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.ab310900.0_1627503703707_0.6036114069116516"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.21dc9bc5.0","@material/top-app-bar":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-L0UctcsGN94FCw8JXrk0/tELlv5J2xiDYmy4OdwOTH4Z4OR3rF6oKuLcLM4LvjVJHhECgmzGaoz/GEtEXl3iUg==","shasum":"9d9fad5253a62f64aeb7f11f9a5cd8d2d38420ac","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.21dc9bc5.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb13CRA9TVsSAnZWagAADQQP/j81LvXoi2J41fgwEuwz\nTmYj6Aej7v+fey+liu+1fLfwFtLO1CG0SIC6OpZ8GC27NURqFqneNdecHc4A\nOIxvH3Jyxr8+8V8CklfGmK0Mh6c372JJLSYRfct71jJTLXUzZJE8D9UxXmZ+\nSg1QV3thoHdmeJkbRDnKWw5dZ9CwdJhGt2TfIR6eo6abNZO01n26hDyQ51Bk\nlSxnL285skw4V76LiRp4VdpXf6tZsdUqSTl7adT301cw7rRBzh2nTIqQYf+g\nU1MkLhVbDGnQYzFHd+wbnL9UZZO9OYeC3RRo+ZjJzKArs/9GVtEcm/aphKsr\nNc+6o97/6ub4yeeZ61UmSS1oGqZ2kpK0cwilORcVdylZVoDbpRRxI5URb5ji\nFvz1wZGLuICzI7RHvg+jZFNxZAYNIogfomR67Bglw8QnB0w19BdFHuE0HDLx\nZ70uMQQsQd4de+xhKbKOobIhAChKrdyj+DK+vA7+728d9xdPfOlSS2fZc3gt\nVuTyT4tmg4AMcd1KaaTslQHqb3T341fwoTBm9rnTO/0lzSQ3JNctdxd74SKo\nRzaPeF6Mag23S9tN0QD0YyUwFc6o9o22R4kW+VOVBbsdlbhbQvWT+SUf1J3v\njaVo10mph8AnUR9RAccWhca89v/7FeReRKyINmFF2g2biibDAFRJ448j27Uh\nntJ5\r\n=rR6C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDTsLXPnZTzCEhal4Q1c9IFt2/C5wXqlUZHo5ns2GwzNQIgOkuXrO9FyHhO0QIsTCVNFzuYbeYIrKOA6hoSHWo0s4c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.21dc9bc5.0_1627503991504_0.9151528032861549"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.68c7fe5c.0","@material/top-app-bar":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GZQUqksLSr3m/6G1Z5PDTaA48VaZmspUhsu4OrVEh6+Sa48lnrzEPsyX0l0gg01X+XVuecFicS0QRfT+DAsmrQ==","shasum":"0ab163083717a136ead5b4677488e83755b3f4c3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.68c7fe5c.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvQvCRA9TVsSAnZWagAA1VsP/iaYUQoputLyl61u36u3\nIVILl74+1eIbFZ504Ws3E/7l+3ONb9I8+FNzhBFUS5J+dl4CS2siuSOS0OhH\npZUIvvaAAOjf5AWPDkL1NeN2LEsHe7zuASWXaJ6JJiJcXl4+CJ+zYoFBA1/5\nw+YiWHiV2crTxqKRzO39vWpnCBJtiu3b9WSEZDiFEu2KBc72vSHBSQoPmsqk\n6jAM5+2RxwxMwvthSzH+JAUm2otqd8KR7iMKfN8NCN/4J6ne+GIVeglUWws5\n1RcuENb9W6+q5riVLnB4FpGZM13A8sbS/8E7+teJvZgF1GY7ojgJVbNCYFPi\n615E6/Dlz9L4iTeNPXYU+P6U1eGfuqI6kau0xWGThr1ScZ2W37JSR9gRlbb8\nksnQEF1Wg/q74gV5oqdkasNg4tW7Rvm1K96NnxBWRfY48fiM18c46iI0Lsc2\nznr5fDxAqv0IExxEqIVqPxvdbq2kIT22sOUh65eThNfhnB9ejGhj2mIVzQeA\nzrNKf+RenNEBAKLqRDpvBD1rba9kwY5ERX25D7gCnt4yjmvauZgOE4Po7SBM\nabqxi+eUjwhQPlWKKkSbgAJBzI91PVSPDZIAnb7a3ixMS0JZe7EQyAh7ENGR\nwsKnDsSOOAgku1P/WExuEgJ+l9bhLuKc5kbOUH7HAPbOOrnDQJbVGppl3HXo\nXg5Y\r\n=cBm0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICpUxnLS0yt8Cj9AxYER7kb3BznDDFnewcVjQPenF/hkAiA6NROFkr2/k7IlL3AkrQP7qBWdC+3R+qtLMe6D/2fKSQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.68c7fe5c.0_1627583535346_0.3974394091712221"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.aebe39e8.0","@material/top-app-bar":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ofgd8HmAnpRXmBkcWs0F82smXWjzrRJdPpeKqYN6zsfaXbWjSd9hQXnwCjxERkNQDeNILEy5Nd3fNwcJW9f85w==","shasum":"53e72620224d4abe5e4ca1afea9d9ce64928696c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.aebe39e8.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE+ACRA9TVsSAnZWagAADHwP/RZ1ibng05w5xS2UACIE\nQQVZ4F1pQK+PY4AeM9UPdpIJNVh9hR+Yw6yQmHGl85ILMAp3qLL/rdaqWwQs\n7hzNR4lJh3uJSxcgAXDpu9slI1rIAj029CFaigXF4s+iy+7Aody5JLHL0VBh\nRdcGz/I9m4WcbHj+UYjD/zt82HgxKNqjo6+uzn7qv9WZKmx+ZYQmowNstON2\n0TXuL/DSiEOsIGzLt2/a0k9v3U86XFurcEugwFlH5DOmp8zkZTm7NgHObJs+\ne+FKWPrDG4YBN3RAcEtQ184CQJ+b2T/noKIEujJ/yPckKBkV1M0MOmq5kaTh\nTniRIv+wcWZ7YgHqSYWyO3r6X+MSgQYQw28KAjc5/tORGK21lH1o/MfTwjM1\nwpi0uDQDm7LA8XpE1csNcYVskK0D2ZxYedGww52N0pJqHzDtooK76h6kUykz\nVsVvpAENvn/YJaYpplQNai6icdu8KqIH5Iifufbes07AafW7XfBw9A+9P7YF\nHO5X+7FoqLq/ocqRM+dm5OIeY3DC29O0HFKmkkdEo1eJOaTPPefB9lrQiqdq\n/EVtDJxUPm1cgrR0ym+e/XK4h/eDyyxDH6X+YW7I5ChSuFNXVzLgINHNOoqx\necyEHcl5Ksaq+V+715WXHd0yof/mcSpNH8UrvAQqSHhkUe1EbvdX2EQi7g9u\n7E6b\r\n=hJw+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHjgBZBAEqknbizA2ZtXJ8ob11H9kP4Y7BNwiTz9I0eFAiEA6H79CJw+JeeKftJZ7jsadp5tCbfmph+2ui4+1gf+FX0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.aebe39e8.0_1627672448229_0.9380244252095826"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.ea889c69.0","@material/top-app-bar":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-p7jdJQiCEXAMw56WZBJrusDqQ7MXN0cVyW2RzbwchnE6SwF4KgyJI23EZS8nKYim7CUbuW6QRgCJKSmf3NoAmQ==","shasum":"47b68ed29b5d7b2594c2b4638650f671817d8cd4","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.ea889c69.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY9nCRA9TVsSAnZWagAAySkP/RRWhshPcpgIi7QgXqsK\nFDVKbipObsijJPzjAIlOgVCSbta98FjJzFwE5tT0g0Tqsabywmrgx77QSfNM\nJBVvQoeYn7/m9BtHFDb5ljuT2FLRBjE+YdaT6vlZETIV39K3oXSlxs9vt4ew\nVjWMfK+tS+odnaTkLNdpG9ePnpmvgU7GgvvAUWsvXhlbevmQRrTbKyVna+lM\nuQv1HxIgxgmlbwW/u8nCpZhJD/0PC+tlrdsz6Ei2Z0VM6ZPcVQVZ9o+oQnoP\nXR6juQ46TGbdxvDG7gz6WmbDJ57TP8glB4E3ITadA2OVoux30b3ySpjlaE9j\n13qUDJKRCrVJX8NqlP7Lb67+RVXQIeur62onniKmLSzIrb8doltr5iWXOgCv\nqVRhXR/nJXKDl7QTPcXZIyMudEXgne+Dto5hbNycFGPTatFYEThvqi4/EBBa\np6UMfQOBVbawj30QjZPOub6wacDpYm2EAqYFOGyDWbMSwINlLD5p1R1f8AZW\nuchKF2YjXCRX1gh72omY63F+kX4x65VDZ099Mn2ZEjo/RNzidGjB0CIqS4it\nPnkdLOR64VdmW9CWmmQM1IynsY8/2QCrTGrHFuQ9K+W5CRgOcltnDQ4E+oZ7\nRsp4IN2GsLQ54fODbrD3z2LdfrJGVCpMpv9x8m3rm8Ufi+Fjp5obreUQwU+3\n65aW\r\n=bflh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDJMSgNx5lYP/17zxRuONlzCUvV7mRPHDafoHXhPVufPAiEArBxdq0/YyTKbQ+9DtfcH3kIyRFWX1SeIx4ViYgiOA70="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.ea889c69.0_1628016487391_0.4473962595440024"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.21918905.0","@material/top-app-bar":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8vcF8LBAkRo1aWswe+hlVC1TYlZA/EJLV+kMtLC2d9ofY1iUk7inGssSkjKTHMqfX8x8cxOvwrL0IGtiXn6Qfg==","shasum":"0fc8b91698f7d72e22ac5e0fc299089b9a052dd3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.21918905.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbHJCRA9TVsSAnZWagAA2YoQAJPVHUxwR6Tw0Ex0735p\noIiFGXXBJLOv2GGj52Nb2YygwdshYNzWuaYOiA4GnFqirSg2XUZyWicMbu26\nxxvTjN9sJBisVQrjwH3sPyqM8RBTdgPizc4/zEOX4WKPTL3PQuF+vtBkFu93\nDB3U7R26tIl9ZzIcVq27kjV9aamzpZXk4FUUxYj5zor28Mwu5l/PCJ3UrD93\nNOtDuOTTMmiyFu7dwL6Jt85XAlBKzS4vHhVvDvFAfkwUrxT0spQzYcSAj2j5\nn/cLLSdXetXa1YJd/aZ+CxGmtagAHp+XV5GVUIcRyGigZyhW2pdoDpqz6BdD\npqw2gHK//ONTh9V3Wsilp1uzthEb+blppfQcHaZbN4PEr7V9OZc5zguw/6Hw\ngiGue3s+/AX//6pt6v/jAZLW/iOXSX8E4as/wvbsmMn9btprv4gxE6vT6bXr\nejRMQXlmyflkKl4QHEd5GBvNSVOQ3yHP8n4zBhEl+8nT5bYf+F1OqF52Sad9\n3Woeg4y5TkcD9U3IIV6Budvx2Lu7oQXN5LxHrd6cqDKqP/l/fg3SkF34bsUJ\nGKOs4BbIrelFmKYekyRI06kzD5akuZO54Lt/qbGBrlg79DebrPaiX/bjdHmc\nRub21lkUbduNmZzj2rOgdz4RNe+CrC3N3+RI1BuL8MU0SrwzPOgn3ingoLpk\nsGwr\r\n=5T5K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGTT7PtyTw5B2TrBfm2koQmYZrtBumeqUQKjspEeWJbDAiA/lRucAP54EJKwHi4lL8Z1uPsKXNWXmXj8+x1Gos/CIw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.21918905.0_1628025289680_0.039526820731306866"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.193c87be.0","@material/top-app-bar":"=13.0.0-canary.7c96e6b98.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zFAXSvb4U0TlWTqwFmCJQwhEbhVdtO8MKT///WbX3ewVhfw9CA6c08oYlh6NzkRnb/lJDLC/DfFS9Hlft5W4bA==","shasum":"6f4f63de90a2e55d033b0b4f77bc568d4e7a052a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.193c87be.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCteDCRA9TVsSAnZWagAAwnwP/0OvdkJGYTWjnAobbERX\nptt6M7OTUTrz1tsWA6JKyyJ0hiXWRCZZBJEzLqdxGDGj06k7QBRT1KoieLBL\nPRWC2CIsQP2khqBlTvSrlndIs0mKAnYE5G3d99t4n2g/CRhuulMdQRyhiBOz\nJqr5QpX4iFT4ebuvb686c8wSSSu5QQ2hjjmKSnLVB9cy9bdH8Tax3GDniMhl\n8NzUgHkkYkDV67445+4Y+8KSYgaMCdbPJ3tnlwhvGl1NKyGaoQFDyzyt5Y1s\nzTnbjhcqkPRR9bOPEZCWDgQS5NnzdGWznVBPLVnVZg7epy+QP0yrChwlDzpj\n+tUZuXdbZZLaBouGa9I4AgG2Nhd785LW0xQycCLtLkG5WqVEyIO6K2PjNvmL\n1pD1Z2b10PYcWIUCwLPjMsY7U2RL9GD06zIxpsXkkSAhgmnvGzcBs6EFvrFe\na5gqrahbXu/azbJSLMl1oVpAv3e9twAsNESKG81CX67j7ofTC3hztACQIDaD\neVX5bnWfdcaMVd3bv/nOs6VxYrVVWc/GlSN6oBQ6btijha+oL3mqtgk1c5EH\nlS4jPNFfYiLl21I3tGsEuuX7fXjD07ojgKl8PimsgVlcZOFAsSxmv9dxR5ea\nbqay+mRvA3TvdztoAYsyg7OFia/0UsQ8yVUoCoI9UoLTOOd8VV0W2/I+HHCy\nhJTC\r\n=0LL/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFtIciol+NMwNhOu6ysZz+bVRbF7oG80XJBsyC5IPMoAIhANxz7dKuvpcKabVfBqibzBE3skvxpVSx/mTGhPku7ziT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.193c87be.0_1628100483366_0.561780663939139"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.6fc52d8b.0","@material/top-app-bar":"=13.0.0-canary.3dd611091.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YAnovXPgo+2+b3Lr1EiPtd8ndbuCl+nWMQkxuTUc9NfwSmuNFhLqOoAm1dAOBaJVTGc1xZ94a+eMtrhAGBKIVA==","shasum":"8c72b8c49a4c4362b41dd54f7817817226594f26","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.6fc52d8b.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCnDCRA9TVsSAnZWagAA6qkP/2gP7LMSAhmU3JzbKTPK\nogfPhh3xCW7kgOPJUA2ZBV3jtQUgjixyiSR6zYHHKYR+U30xNhcw5NDcXBcT\nBh9EG8Va//Ic/4PtH+rn+Omk+8eIX9xS0oc/55bJND5gvSs9y0AZbKfKBJAA\nmcoZdJ3no7WpqMTwItHhfrSMobAsqOL+w/ux7GSaI59/aq/Kso1ogt9INeU1\n+v8ScjU6bpwiH09YoqiIQdDnNuyLJFsd4223TC49YOY3zTZFjok4wjrtAbZQ\nf4/loec5i7GbBh1qLnRX9o+ICxvN0wcHaOT+sKgwcz6T+BGZHvpruJ8rOe4j\nwZjlSN7/9gk8GMp77JMeEb79C0xCDXRYw9PeNW6SF3RH0WwcyMmMxbdFbLoR\nNfvbkOwLqkiVJ6aGcpJWiV6g1Uo3Qa6wcopWm2vYbuAwyLhbUjeo3Tr8rMwa\ncrIX2XZByhGDFC+PgvsSpkiWkPIJd4cI5fFgLdwaXwbR+W4pvQ+ZYdYZ6Uvi\nB496CklvRAwmt764NBg4tpC3kGDbtiVGEaj8Mz6B0ISdRxjPiW2+36ORygqA\nU7tONGp8hCMUpEOz10uxJ2RbHVMC+MBGtVO5MZzJKL0O1ZaWSQIucuyMcgGH\n+qBOZtwYnmg4k4snZokzvTDyF+5yyi2voWyuEcSE37NN1ldFyxPmn8EIngQ9\nZps6\r\n=/zZn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaZbCbFEq6QbipOVrhMb9pOUpp02HmUzAGVFOhUxEVwwIhAMTR6QqSOnGvznMbCBM5XJtYqwHmbLzwdcFMsNGKQQiI"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.6fc52d8b.0_1628187075130_0.4181433582819618"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.e2e9777d.0","@material/top-app-bar":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DfYldzEMfoBSxhxQOEKHApfqRSFBaKuTTXnRS/jtxkRuNImz1LCxf8LvUH9XbqV7NuVee/giiqLVpOxEPzccrQ==","shasum":"ce78f4c0274e4b1f2622b5a6e43cf8c159660745","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.e2e9777d.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGqXCRA9TVsSAnZWagAAO/4P/RPxNzCG05MRHQZDwrfn\n4BzoqwBM+GXr1nkOKIexaQDJ2qq1m65f4s2V4g6cWnacZgTt4U4Whrk0Mz7X\nEcK7Z0qtpe/n/Mg8UKaM9uxkfpPCuMv3CSn1M2I2sooaPWtt1P7IjP8uBU1o\nmNmLz3jF1kNjHprxhG4/NJbcKC0li9mo5gECN6U9b+79RANXnr31ncfwmXG0\ns8+DTB+kk80ldmy2sb6oiCxKPsIsQe2cAWQzozQj1lKat/hIWcGRf5ybx7/b\nMaOwMz0XjlKeil1Kyl6TaVeXyCIDJt1rEDUuPErpq6HHY8LFPxjcyj2zXhU2\n89YgJmMG5RXmXKltTXnZQlRNgm6HlbwINvpTj22tguMRp8f8SfxwPzjgu4o2\n1OAvykPLtZVNkCSjULPnzJ1GiSllD8RmwgMmkZKmgcJt6BRP3+zJTv8IK5cl\n4bw9X1yO0bqUBV3aShD/w9ir20Nor5t8rsZaqrHiq/y2HSkJSXRetAhtOlxD\nwuL1BoOWEgJg/gHB6IayNB/g80ZASKVtTnaTVLQuQI1TG1CHRSgnQeJlPhHu\nPk7BmkweEOsFCbk05u2vv56YD2culxxTpHmmnpASWe4ahLl0bi7dE4JY75am\nrpVbwNPflZ/n5LGzybRoO8VckEZzpnoxgmmTOa35gOHRSoY0fdiV4HTy4HKy\nW1Sg\r\n=Ve/a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACJBo0Qxv8XF0zzJCpF2wM+HZ4cHvPjL+R1pHfq6plSAiAvX4ra0w5c9ulSJLc3LMtg693/0cIlfyQdFZxCoovtbQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.e2e9777d.0_1628203671225_0.6363126060761093"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.72ff1e68.0","@material/top-app-bar":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6JCTwMB3wQEQ+tInCe6UqQQBiDI9y/JyQCG4f0Y7GhBLOUhB/TZ718ibweM84jgvYWLW+YxQToQfEJSr7jishQ==","shasum":"49a674a4dba9aa3d3731036a1001794b886ce22a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.72ff1e68.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaBJCRA9TVsSAnZWagAAuekP/0Tb5KA8pqOiKCl5Sru5\nokvLLBXcgq9JB4R1MOfxTg8rpa+UXsGpR1HkJEFr+GZB45qz15wlj+Dafq3n\n73U8G6pe9GibyqNuRRUqe736yJYwFfcfJkLy8Jym0tlUZn8VSyCJ2WgJhKQE\nrBMHkd4FUrOU5cTDh9IjBCs7kzbpw/lanM3LsxgfFWVEfS1wpbr5X1i1WuKg\nBDzeDzOxu4D6kfHskEx02kWzjH/m0aXhc6KIhTBdLPM3yfvkEuo+40GBSf0/\n2rE0mJFa+9JqWOY/PDt4oLVzwclDz80XOmwLMUdJuDB8791RNvvJs5zlg4p6\nEkxp3fybaTPN/JRbSaxT4aivV5wNVZJ1dpMU0NvR7B9hbzy0Vlen6ERngueE\nd7hKYYIAo3lZ0v7Txz4rleeQkXm5aJd+RiiIlkPRwdTHIpETo0U0LLH2X3dU\nfjgIfbKJ2xxAGwQ5oo7ojobLthhy/vrxs7VAKsmX7wqVJUYEMMrIhzm6fdkz\nGZT4NUPQMsgEnsZKG+APoCKXkcqRoVspC9SeJ1DZoUtplaXTzJBn4UnMk8la\nslXXgc24U3foLgkZhX48NzFkTSryAURPfF5iui427nmz5cSENLswW8GkHm77\n5dlUy+lU+l7dYwTwxQOMEFr1ozn/CYtAFTWl5n65iUDexF64iYk+AWFVZy/J\nNIvF\r\n=/87Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG6X6vJsZJolnNNkFXIphY1eowAiKAeKcIo8oydoNdAaAiEA2c4g3EKsD844w/zWTzDEJJsd6QAdIWrn+HoIDT0ZRuQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.72ff1e68.0_1628282953203_0.7956854742657227"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.c527e93b.0","@material/top-app-bar":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+FFA8cncXOO2OH7zYYdETCL74qNgiJRTi86ulIk49dEypkxCYh//r66PsoosH0FNvZH+5j9waoy4Ey51wjDneg==","shasum":"17fb5dc422d7a52e571a10d85f92dbb1b7b89048","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.c527e93b.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaVeCRA9TVsSAnZWagAAnXUP/R66pplTja6kZo3zFQSa\nz/tBsnM06DdoGXQ817Rb/AT3pv5XTEzCMkJjdp/Dhp0VmAToA0NMGqSoVBcg\nJqGQbmfXnb6VI3TbtKmGpe89yNAmXmxzrSqu3O5UjbZX0Bd6YGKF9flF1liz\nFmFifeQ3yjqqYin8ZTkgSrDkF7IcyCm8iLkc79QmawafO17t8tIkVaK43RFS\nHiOZ8Sz3Sz76pNK670x/V7IrGo877JKu7QjBd4YilOYCT2V0FfLT2TNOJSfV\nTb48u80n+sGeZgKaDoAh+g+DZ9uXz2gKI4Fjslj8JIYn/8+03kRr8Cgy4+6D\nXvDRUN/vX9K8OCFkBC3ecIRB3npDolBMIbNsVxtYnh+1f3VxF68w7/9L2Ujn\nUrG1KlHAvQw+GPr5XOm5VkQZ6iLuGbNL2OVp092dzOG/2EGPtE1zC5t2nvVD\nM5fS8G+xKyASrMgEUT3Ge/vkVGkB35fMdOouCDW9jBbft6cZS1HSGe9+rdj8\nGbDGPXr1nUR2Xp5ahziECIBW3rl6zwV07AzzvA/qpJcGVetPyknUIuvB1xeH\noiADUuEKpcQUZIb7IU6+Yc7B6VmfHUPgmvwAhjenDaq9rRzFBMtzhvbldMAz\nwhE+vKbZZ8+BMJcKu4D4ZNJB27OuQ0q5+/avGrhmTMeLSlOcx7Q/fHzpmIgh\nvOab\r\n=Oz9+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBg4sP40YZuUXF42nC9MAxIqzlbF+qHR99rNsH9jo1kGAiANUEo1JzAZrCWXhGCpj9NZaURAYjRfCKm7zhNgoyqRNQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.c527e93b.0_1628284254646_0.8853947848691266"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.78b1eaac.0","@material/top-app-bar":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-s8amxM7hNEusbTBOhjBAMW+Nrwml/MynmEwNsKZqHk+n1Va0/dLKVM3twKtIMOE4oKOXnCoMbdAWD3mZr1JRyw==","shasum":"0d3c0f7fdde1df1f46cd64eb23e1b9c4dd9d0fe9","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.78b1eaac.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW4fCRA9TVsSAnZWagAA6CkP/jrajJYIH6wCd2lpC5br\n7eSRm9sVXOZE99qbD+nNXFjFN64J2FyiiXAttchbVqdLomFLcujwcDRuv0R+\nn3pdqed1qZH+nPNRDGLWPW9JorovM/2Tse1dxXoqx8u+2ZB9UuK9v2J/UrA9\nYEVeY2oiB5tQbb40BKhghE5Vy1Zw8BhiwGokoivFRJ5vyI1dAs5ofrY5WH/R\nJHOVDcB0GrsxkgtkF7AmzaDde5/M5XzITL98VkjwJ7yxCjtFmX3u/OTnuokL\ngqRyZr3+rXpLCaKmXTuEbrTbt7a2UVqZP+RFYRnTgnGQhVX/OY8YX/lA/ifM\nRwxUh683Po+0NKXQgLYWKnUtDaSxEuq4b6UJ6OqGqu2TvzWW3yyMGQFwR/Ys\nKz1V9MulRxKosZHkuYW30y5Cy0JpNQYHntPLL3n/UgKLnJeIYgpymvMfRBp3\nzhsj8mitNP570/S89Zd6tYlwKSYqDDXP6/BctfoT+UXMpwJ4m+nBhG5RJCBY\nxZYe4QWcJOH+1wuVTI5tzJNHnE3/ED2/6BJOp4uzyIIzBAkfakPGwqDDNHid\nK1QutQwVMyYupvcOqef2TRDY7PxCwY38GmkDSh5C/dOXQP1fYxVzWa/HW/yu\nKovEWV7dYMJ0XYLFMvn0f2W1JIB/wQGzMNmtnRUSWJnTDURNTwf6BLNQwahD\ns30p\r\n=Nhr3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+L04qgO4a9Ys2BAA9ra6SrslROZ7AR5yoEntaI8DAWAiAhYC1v4C5v9PKgwkimsr9ntYaBAcQz1wh5+uu4UxaxPw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.78b1eaac.0_1628532255323_0.10537487401440648"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.a8a4ddc9.0","@material/top-app-bar":"=13.0.0-canary.7249a3060.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZYZLm53cWF+GzL5dKpG3s8/5yOApDNvjLn/emwZpXUdEIxxW5R9cU+5zebZXVLEOCiWaA7D+PDh9lRgakrFibQ==","shasum":"1dea2f36331b2a5019758a31bcc56a602058aa7c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsm4CRA9TVsSAnZWagAAoscP/1EfmKKi1sAX7K0Y9uTP\nniMeel9kbtqwgMU9dr52e56bj9V7F4jQvrGcQslrjWkdbB4mdK4UcPsWqTox\nk2SygEpB+Ce2D1lwkbiMxPg7pr2e9XvAuq594QwbmMpCZNSRbLbVd2iQiIAg\nHQ8N8MH8c/1Gn0rHAPC+RcApMKhyeD7odzBuyRZSysilPstB5r2a/62yZpkM\nwQTiKykzOuI4PMWfr/RSB+mUTgwMyiI3v6L1Ua8okrKh0W5fQXeN+aTeIC0r\nc5jIMWBVUhXuzN002UxWZnc+3bRtvoW290nd8ZYVoYDSOMtM9DxcIGtOc5qw\nCH9W+8EqcgZTTc4KXcJgfcttWBphyXsJWY1fU+WJPAp/8De1bUZJhTer2qRM\nnVQnKtV88LENYejX3aJJYaowkn2fFKbnQM5WCbtCEhTUhkBcFZY7QQCNnlE+\ngbXZm28LKeIJA5zkGDpn8y7jH7tNLlPla/URf2H7uVK6lMdZkyqhp6GM5Pwk\np2FojIQ3EaF0e+uXNy5GJq/ULJ44A9jTqWVHZ43z4Gtr7DldbejQBTJi1xxg\nJLFlrDlt9m9hMXDkCD5zKAz5gpNn75Xp5Fr3zXHTLq3XUh3bHiyFyeExqLr0\n7KS9tRCgEqG5XPWjZSRgqch/bMwrfoP+TgESFCeptja46srk18wZBelOjnCW\nMkzM\r\n=PIp4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC60umCszS1CmfpzYo+YLpgbOelgqsJjidHm+AXJU9StgIgWx1rLo45MwW5QHuwixzzJ6ab7FUhrmuPz1XdCGiONI4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.a8a4ddc9.0_1628621240596_0.8021620160148835"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.99fc0632.0","@material/top-app-bar":"=13.0.0-canary.f4241a42a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KNu1Y6kQl7QNvGO4bhLtUeHzFR7raMZ2+8FkTbFAaS0qstAqSyF6PNqBREM5Suk7ICv/NLlL6l32ParriO2YSQ==","shasum":"54248d6e8b59c99a7d73a9ed869465e7354aa110","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.99fc0632.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE2ICRA9TVsSAnZWagAANpoP/1jclJgiyB59oSN1M+yk\nliye6BlKrriqo6JgByjg2AjyiRJ+6LTg6695uOMmL5flNaSag51tpZa+ASzq\nkueAG2gMMiTeih3Ujq+fgDmZjpeCbS3oTNdnelisBWJ91mF8PkWOjAUJzCih\n/6ztCjcaFBm2X0DSPdbq2Xfig5UekFlw/Tbjkp7yDknNstuvuYCK4TTQi4Gf\nFmuo87lETVveVQlm1amXZpXo7LOaKGPytKhEGpqDSBCy1dzWXGp+1JQvWu33\nedBhbdXfOxfR4bSkr6nPljaHN7fjEkEQclhyHhm5WN0r443hewEORcHvT/UV\nf9UDnXaIvrFS49NoSnDeqg0PH2sHHMhCPj71BKeJ0WW/BmxvGM8Z5YV4bLIa\nHEeu/LtxrfDSeVxVxsWmIJTIY1667xgE0s70mBLwc/qnin3x88RqvjkKpAlI\nOiS35RFMc+v8deBqTixNcoLJjVZr1gxJFjXQR5+rRA3Va+EgsSPeD6lLE1aX\nOeadmWj4jhyNrSL0cfRjdni01NzfR6d2wztDaVcXUX1SsE5knyWlNrxYuKhh\nijuZ6U38fNASErX8K/SRzKJiOFFwlEnLJft6hURmDs5H0jo6QmYf2PswfI/s\nI70vz/+ehFc4a6eamMOk9IjjuwcyVZoUpUmSt+MD9Hh66v+vE2WWmydS1vYM\nXDmw\r\n=rG+h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVkb2YS1M8j+aylOoBvtv1BhflgVQEzusPHTQ+6r8NEgIgeyHqLlsMbzi3N9XNTUu8HNfudW9Fq1Sez4UOyZH3u6w="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.99fc0632.0_1628720520395_0.9883531271279722"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.3f47ae57.0","@material/top-app-bar":"=13.0.0-canary.0ad12ed3c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I4XmtacSMEL6zUTQGndalk4S67epMhKOk6VNx80tIo9U8S3z+SsyjtvzxvBA1q7LOohpTgizAaPs/pAXe6qoRw==","shasum":"5fa4f6b7cc28b968d609d459875ba08c56b0264c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.3f47ae57.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWG4CRA9TVsSAnZWagAAUVYQAJGzKMcVPxzzLXiGVf0c\nbOUa2PdkML+2kV+2UYGndJQczLsvqahGCxgjrza0/fn6E6q7BsM8imgPQuo5\n+NkMUX4dLj1VgFgajNLah6gDM8U9S0niMEBCwDwr30e6lxD2ATOugf3CbR8p\neOiZThr/g3RY2ga58L7rTUHfbESqu/q0xpveERknrrxzaCG+LAK5drxL/uoZ\nDYcONQNYQ6d75S3SQMWWJPbxjzqj0DLaD1dThs63aeQBqSNrGuxFMX7kmmJ1\nQ8aKhNSDlEdCDZX4hDyMyKtkebvgvNita1dVN7awsC5RgSqP/D/N/z6V6nuT\nRXKj2VxcnLCsnbsB76lgowPOJKAZBaUhvlGlVO7PK05CEUg699h8FWmk+IyE\nmtApGOnhDf32LTY0QRkrB25wpwh5mrm+OD/7Xddew18u9kNnouuywG7ZquMf\nOnh829u9Od4DBP5ZBlirf2kq/bctiVTcjrXLDeaI2olBj/u2FySFpvavWka/\nX1eSYxtzuom7WaGiSsWevibRMU4JmvfzVL2RuSv1udi6ZdGlMr88Bq5khhKD\nDV1FpOfLfTi/sEVEuP/IBSZAphxFwzE4tS5rjML91grQPDEWVDvBLOdaYfQJ\nC0FM8QpZqNGo5q9PFHwnaHdCBbWmoAwlpAn1yiHgqfqYefFBcLWxpu1awHV2\nAhMp\r\n=dCxs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmEKzcSGywLDNBs4xxvnDrR+U9rz8RvBN+uZUmI+9Y9AIhAIvllOrldOqsXM5653KuVHRN0NG9h2xyrdAnvzf8SyO5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.3f47ae57.0_1628791224283_0.36122267820818443"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.6b9bfc32.0","@material/top-app-bar":"=13.0.0-canary.077dcfcfe.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[Material Design Guidelines: App Bars: Top](https://material.io/design/components/app-bars-top.html)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/top-app-bar-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-orworO5XbnfIhy0nRaHLbMCBQN9CNgVlC65ZnT5Mm8MypQ9+0PdRSEyggI/KxVYYXjMNravdqBXgaryLn+VBpg==","shasum":"9b52edf5ef94ba104a623fdea20780cf3436f453","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.6b9bfc32.0.tgz","fileCount":9,"unpackedSize":25367,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWdkCRA9TVsSAnZWagAAqEYP/iljWzFSjbhssE2AmwKK\nkp679D9ftPKe5T46D5nAmZNoYUlLrAfHQbhPAXG7fAcsn99sHSF9KtPstumV\nypt3HOKYXoZs6sRSr5aUKSx5cA3w+whfLCDnoYGxhooqZXs9/i7pf1SY6DjD\n1w1+B0pTsYRGpAsxkCt9x1qZqb14RZIm+ACVG2OBzdHrJBFW4h8oqomdUvTu\nYtkJksq81poE9kDDozoVsLtNjFh3EmDDfCOPKX/ACOizYzb1YPvpUYFg1+XM\nlNpiGWoN1s0E4PGBKaUBK9cVFwU2rWS8ltOEbQL+PgaiofS6eaKBBxl4HdZO\nAJKNPD58laVRfE2d8fZi9iJ6+E4MqXT6spS2uEFB/bEmOYSPfd0kN+fuWkIX\njaw47LBHO7spPr5nSUpD/9iniEZTPrjO/pGogReB1GjG6/9U8Czd+U0wLuu7\nXeocvQOmcEtFEqZzGPqa7wDHPueNqBRJ9zSofbOOkcOApV5hBJbVNp+QyUmf\nWQTGQqRy0yBjQxNIsrSwZI6x1ZSDVCAivxNHgXhA0UANcNHHFN28+RppAImm\nU/4tv7KEBpG0Ui6aY3cdlQOfHi91j+Eg9CilM83I6ikEoVSkjW//dWvZNAGa\nyXuEKz8TSHY8XAwg8C6Ff6PjRmYrDbTY2v4abUW2d7Vcx/7Ep60ztecjAs0c\nNlr+\r\n=GaCA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHQ9htFY9ytgRIlcyfuhhT+PzgXKdN6t7PhHvHA7q42BAiEAkGSVEN3c0JYn13ywCxhTrwK0BvXkD8ZcCrYojSUZeDI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.6b9bfc32.0_1628792676216_0.41964578621635007"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.c89ecc63.0","@material/top-app-bar":"=13.0.0-canary.2fb068fb0.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1bGLtsYRPqAkZST4fu/lbupMSqDv6qh6EY5psR4X+MSQy9RZYLPxgDr8RFcuHlTkax7WTH74L6E04iBUeZegDw==","shasum":"0126070d7a30a35b3c21620da5f30d2607d367ac","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.c89ecc63.0.tgz","fileCount":9,"unpackedSize":25345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp2hCRA9TVsSAnZWagAA4W8P/0YTorTW3RK3USJ0I3Se\nG9XyJf9LSJVDA7lc4mMw6BqzVb8dBMMjrg6cjY6e6MpA+Osy2oxMmkWORkmb\nt4Cc1FAIEJkRlyHkbEUouFcosG1mZwuST2EFrQKOB7JzM+6rGwCkKpDajkIF\n1RSQR1s/4eLtdljBqb7xxvlzY5N661YYn+KaELdt8+1B7qBsXkyGQJJs+5KN\nx1NuX4u6d/nsY2PD6ehLXWdZKs44U4QdhZDNIlswVZjyZp/rP4DEBs7LtPYw\nbgOE05I2x/r4V2toOOUBY6rE+o4kUsB5WzMI1z6UZZM+OOmTfNHRyjZ91C75\nNO4Y45PVdYEP2HbeOvjC/FnGRWOi/gGeWW+DzjlwU/ptS9GnNU6pEp+WaslC\nrTzeFNtcmSId96Hkkx6ZXlI2Uq3NMKoW1YMEEkdI/WBCMob8KLxD+c8b8sm6\naQwUAbLNBFPKsBlvOTRInw1VFqbPK83SPWR+uObjUDl76IEQTKYAWwel0nww\nhIF7jByc4YiOtJlRcSoIggl1JJSWwi6qupKzbFEmpf2URDwyO188/9vUOUi2\nKxnlzBkwod+6aLyJPHUmpigQoqCwIY5QxU+7oPe7dFKBANXJ06MljnzCzaWi\nwrflPskGpmbF5tXgQz6EMJZMq60oX0Cphgiih/kQvH7v3PNWcN+t5TGnKw0F\nkzOL\r\n=ReyB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB8qrAAfhkYxW2FNEA9oYSCcyxazBZA9freVeQt/sNpwAiEA9CWmcCFgsWfEWzdFoBXA4X4SVb72zoIb9dVLXnMPhdo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.c89ecc63.0_1629134241544_0.38097797597206906"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.59de86bd.0","@material/top-app-bar":"=13.0.0-canary.457d89aad.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-4Dy+k41eW7GoGof3q5z8sOWK9vsP8yOrScu4d0up4+WyphWbkr0JcodmtRPWQlDCGaRl/qiCMtGqxvFlFIY8Sw==","shasum":"19658273f6176260596a7992ba04a9ee0d20da8a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.59de86bd.0.tgz","fileCount":9,"unpackedSize":25345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGSpCRA9TVsSAnZWagAAV9QQAJWkx1N7g4nhKxdlHI/G\nVwX2yXJY00Qy4jfvOJhl8oVtWTUAOm9pJSPtnl6dtmVzMSnZPAHQYS2C7EtN\nJnMCZ1rbgS4yivo8OQiLaQf3XA/XNb3hGrtCmYjI9zXT9LpvUUJ99BgMYX2E\nCVPlyOZRYloVInLM/lLPF8y0/h+6TiOs5C4lFjKP31wZ47WuYr0fBeSRsDrO\nrKmsJjTrcUwxujQEQXLAOzLhe13/+QQ8ol1jiwwDt5bCUEE0Gb+MFkqPIwT/\nHC4gkTXwYLP9AU6RyOeSsQMz4zQRmfKUCjCAMYjNIThZr1mYm5w23+wGy7KL\npc0r9nDB/feWt56PiU7MFK/SnGM+cz5CmQtJ+Ko71WDqCFqA0eTUPaiscU6V\n/ExvlWCE+boeyw1L4qJLKlUIo5qRuktsl8YSNkLD9b58J1iAZWo3sGeSGx4C\ne+LYT1l4c1v401NwwiadG04lqh9+C618on2CEShXHc3ySm2CgQ1ygOqrYO7b\nk03KZMOe4W2kCWoPuIJikndTA/mCTb0Xyf6Zo/43fDfYwrFSs1giZ6NJg8gb\nOf0rMPsAhcKNErckRchH29pI17p6Y4lSSWHHee7MazaeE3oh7oN5VxAfpdPi\nkBexIbPNPjF3tyFy2GbqM1zwVySm7+B4E1ZQ1YJeCjGvSvLufbgzrXW4m7xX\nPHiL\r\n=OzRg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtEGYmO5Cbn+0/+wHDblyU3oRgc9VZ0weUNLq/wqWovwIhAM86w2mUJsPJb2gTYB1t1OeFhobkoZ53Jb4qJsSmFv8k"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.59de86bd.0_1629250729031_0.14615755414153164"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.dcda879b.0","@material/top-app-bar":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action icons on the right side. _NOTE:_ If using with `mwc-drawer`, please read note under [`Standard` drawer example](https://github.com/material-components/material-components-web-components/tree/master/packages/top-app-bar).\n| `navigationIcon` | One `` element to use for the left icon.\n| `title` | A `
` or `` that will be used as the title text.\n| _default_ | Scrollable content to display under the bar. This may be the entire application.\n\n### Properties/Attributes\n| Name | Type | Default | Description\n| ---- | ---- | ------- | -----------\n| `centerTitle` | `boolean` | `false` | Centers the title horizontally. Only meant to be used with 0 or 1 `actionItems`.\n| `dense` | `boolean` | `false` | Makes the bar a little smaller for higher density applications.\n| `prominent` | `boolean` | `false` | Makes the bar much taller, can be combined with `dense`.\n| `scrollTarget` | `HTMLElement` \\| `Window` | `window` | Element used to listen for `scroll` events.\n\n### Methods\n*None*\n\n### Events\n\n| Name | Detail | Description\n| ---- | ------ | -----------\n| `MDCTopAppBar:nav` | `{}` | Fired when the `navigationIcon` is clicked.\n\n### CSS Custom Properties\n\n| Name | Default | Description\n| ------------------------------------ | --------------- | ---\n| `--mdc-top-app-bar-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IOQpXdT899vgRLP9hmM201weS/6DfjkiaGn+ioB4OISiifoJNS4nHu2SE7egp7b5cChjJpGrDeZlLkpih8z40g==","shasum":"98400f62980d578306bae3bef7e09ce7b620c896","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.dcda879b.0.tgz","fileCount":9,"unpackedSize":25345,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYhtCRA9TVsSAnZWagAAIEoP/1C2UYJAHdmFEbntqaiW\n3XOPDJfstPtnULZlsdgNnDNPEhV4lmD6o+4j+UHM04WI9TGr9/9nA5MSSD1E\not6aI2JKTFsgH0tzZyTpejraZbrvAdztPNd6eFROaA8Z4WLmNuNaEl988yjK\nRyEru0QFt0rtatwd7uG2cbxYwmI8YzUlscWxB1DeJeEzbkDdvc5E0X17uFQe\ntTdAphclnD/t5QtssHLS9lDESgCbXGCPCvGKfsRsEfNVVA7cR0QglMsNvzH7\nWjFxXG+zb6JQ/NUoCI7H90eh9S0bXfQXNyszfAzkQI2i/0O42iWI6osp4wPD\nsQcN4PDAKD6zwbpmQ0B15ef7JwQfUJ8iLu3cXKuURrTVCnkUQd3/7NtXQjM8\nMIRdPXLdUsSF8F/COln9s+MLUp3eIhBXFDljuX6hypmoWEEtxzl9IMqPvTfN\nZ4btYVC7Ad7hraBcSohxjDZEMcTe7el7bK+SIj6gE0LbT6jP/55m45AlIIYR\nebrSMfaRAkSCMYk9xrTw/WOHdp5t061GIw484kOFn8uROT9ltc/QY36KD5+d\ncJPpfHVXeV1ZKYBVZpkwmYcBS5apX/mCkmMw5KyYLahhYcTVW6VyObwd8tHI\nkI1Ct/waH4v8f4p2Vxp8+CEwDk2G9wGMQKUIqkx0fkHjhIPxtBs5EZVAwdcx\n9PUC\r\n=gJL9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICGNRCo1/COP8uCw+ElLWCtl5yoK/fUjQvyuGLZDF6aYAiAz20ujSbjvkQNRMpVw4MVzUa+b4iXUiE1OAEhhH9jFqA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.dcda879b.0_1629325421070_0.3065684187783251"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.dbb8b366.0","@material/top-app-bar":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NBkTvIjpccvXz5ycNuZEDWLxvHCBwKC4+2U2+FP+PiclvDxnWXvHFkpE1pnaBo1r/QFYWcSO7w2aGdg4D4EPpw==","shasum":"7bcaff5275f618213996448f1bc8bdcbb4e7e947","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.dbb8b366.0.tgz","fileCount":9,"unpackedSize":25301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuKbCRA9TVsSAnZWagAAnuAP+wZXOxAZrDlyQ+YXXH4y\ndT8n+/cEHDRx3BletvWVukR+DPuwDjrs33J0hGsTs24On6cBxW1826ac9XtS\n1j8wuikahExSVsbsOlKMMtt/k8Y9vUHy/81dHj4eG1eqrkcP/S0EvHOvTVCW\nEbMV0AfZMJnqR2wE00DEKrgo16utUGMNMlC94Ukg64izNEfgTXnvrc/Z51+i\nXuGCNU+hCbfBSk/rClPTjN3lLbYmQmLZ8S3FhnAQgYd+JYoekim0paSt8Hw1\n8zVkiVCJJ9o4oPsBR7XYDO+/8E0X5BYz6rkVZ77EGTUtp5STDFxBLm5+H5Hj\nntVVUD8QxSy1mtIeTAwZc3ScttjKUI2fZ3XpQOpd3uOyvyA2+dn0gphlpTkd\n7s6zdjCajtj9MN+U52/GvxdLzwy8F77BmSfyckJSSW5sYdp7mrmcAv40evtb\nJB2u3L/WV9oaMJSled/irCBwBIdXBxTO+mT/j3LK4bhi4n5Z6KPVpn/sSuBD\n1WEiw2GTIrLCueIuP6DkyG+d1C6IbUMCbus00Q5altxwc+c8RXPTYQBNSmbv\nwO9pQ9+LlRLtupyBOshotz1vLXm0vsd4UXCdN7BD8qy3Tvm8ynGZDcccgJWb\n2nzfHW/mU4rdGajXygX7N2JkM7wmlro2QDZsrmF2CYMYoidirW+UU5OMYaz4\nU8Ac\r\n=RGd/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4L+uBs2IE77FB9esi0bB65NWyXTS6GDcqkR0PUM3OVwIgPejNeIQEU22QIx7KqpSJ72Mi2drjmc3zdb5FeGMCq0s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.dbb8b366.0_1629414043533_0.9523244647920295"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.c6e3060c.0","@material/top-app-bar":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dMXirjkZhCKWYfMnJ+IG73e7jgJaK+TktwI9DTv44WpnMzXXpe2xYuhDTx64zO0yJt9A58pM49faIZuLI26Tjg==","shasum":"610bb17bf3517b9c073acaf5c50c197c39d74dcc","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.c6e3060c.0.tgz","fileCount":9,"unpackedSize":25301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuMLCRA9TVsSAnZWagAAgA8P/2MlVXUjB5WEZtkdhOi7\nNdjcF9Qv4gUE7gvXL1dZwUc9QwOf10P2SHC24atBHro/BtC2Yx2i0kV3oaNw\nAjE1LX2KEuDrGX4ad/8fHQAlQOSbDPJrj75Aceh6OqhsVuKzoxVaQuoLZL6V\nNS3ZhmS7boxqjJ0F+PouQyblBL95Ysvp+8P54xKUDd1gc4jUqqf6mcOsebeM\nlpLXR5U1KH2i1mI3ksR4njxcB3QrnitlbPX9xMA2o+0OMil2hlDUyz0qCyTz\nL4cTWZ6e60HXmPAV82+Lg3+rr3xxL1t8mm1bnac1gu+vg12xY+0gJzLZXgta\na0JAF5SdOvr1PHHw4vq4w2ZDNiF21xm6MkWuCqk5rzX11ysSnio024ZPMzmv\n2Lqv3f81o/jPnrOGVABq+6gNqV913bE1aJQdLy6/GRDwO6+t+ZOVxSkZaBid\ngZpj2d7fx+NT2ApJMXVb5+LKZCjGy3PGvS3LbmYVjty5tIiyj62Iwx7BLY+w\nznh57kCCCi80W/bC2b8plE60XW4tGpBonH/l+QLvWwyq4yzyntEBSHWL70bf\n4xFsbC+Iino8bhBph1LPdpzNw7WMi5v0QKFx5b1FP+Ggi3hsStHsVLCNeTOp\nkL/zSzxJeXmdB6ZCre6uxa/CDnvWbTx2m7w3Vk4eyiYeD7GVjVp26wB5ni0z\nVVAV\r\n=upu/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFfnBws9Q1jwixfeVOHHFbLD9TlJnorq9ADNstvlvPKxAiEA9DbFcEB/ca8qrvlNEwmvaR9vCmXaBVJC6vfh/7N5ZFc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.c6e3060c.0_1629414155719_0.45474750772717054"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.03120b7d.0","@material/top-app-bar":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lsQ54FhXGQ+niGR3CRx/XQA7Ao5OmBpwAL+LpHx1uuSs9IuHP6pBDHrGm4Wd6ozZyM44iCksnTmkSy+k1uLgHg==","shasum":"5831e8948bb9986f2c2f75d22947f6b9b75d9bdd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.03120b7d.0.tgz","fileCount":9,"unpackedSize":25301,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvcACRA9TVsSAnZWagAAjVYP/AmxDZourR2vsr4NGNOo\ni/pvnCIaqJ3jP55FCezvlW8A1kabzaXr/cwjdXiXbw5e/IllS+N1ZZmjgWIr\n3ew68G4IEOEVgX0hP60L8EtFU4Cjq1ZcZv4gdvlaAcuMzRp+wD17+CAmrL2C\nWnJC4Gudiz90ZFjWzmPYXtC97jwO87KOBt0aU/caeUfQpnOJL0gLRnMnlR31\ngF9Gl3PulSyU3E7bU6srO6LsDIBsFU++nZfvXQT7lBuIWxhIfHGMKbBIzZl0\nx5AczrcbW2DnE9bIIYYTB1XzaCQHxXbNLiMdzXr60fS1sfaGf9GI4ISsCoNH\nu6+dbsbg1gkzcfhWlj4WCg8FGt5dBFOPSgMJKHPDVnov2tbVl1azvjkKclOJ\n5Piqj6JrvhmT3unFg7aRjkQykFr8QcKMonH6Wc4oEJI8pR1yIzQmMMN3AAzf\nxhqmYC3RHHf+ycTMPZsf1zNnLQKeYI6WnGsrbnxfCVjL5YtKbQgCjLBveh+W\nOdU1eHmN9jf40MNOGEoLLhJyod1/ihhKFs/v5X1tWDs2MxATtHW1/5uw2Luu\nd3uASNVj5E8uhgtT6NJ4H2COzCjpALRD2fZI0OYENDBiT4q87gzgzpCWN5zl\n7cK1cXkTVFQacocu+S/eGxsO9wu2/aYbDpGrOBdg8l7/bDUbnHESLCy3YqD3\nnRBs\r\n=5cJv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFekRB0RbVxBRSNHYXrJsAi6gmkGajoSX+Kkw/3/dMBBAiBCTNlwHh4hjEgrZ4mpPZ9J5X9fr0Vzt+Zf5QK7/RsR+w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.03120b7d.0_1629419264687_0.34897527314373655"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.d75a5f74.0","@material/top-app-bar":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-il88haW/rDbOwbNoQzBAO+aCt19aNoMgsDHj82sA88rHUyNLpp2A9U7GTmxPDTSdgvIyeaOFi9husPXFPERy0Q==","shasum":"2db4bed6c914c532eb73f8ce8809ec5f7c569385","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.d75a5f74.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2BDCRA9TVsSAnZWagAALbMQAIsDE4Rk5dhmUMSFoOd2\nXYSbUgfQwTN09qCZtwbCX4TfyIPzk2UBY11hPi6upROZRyQ00E4TLK1C1wKp\n11mHWQzXAHhpaaDpnmc5whFSChu4WOjX0n/rrk0QXu9t8E6wZChxsPlv0yg7\nk/CqThlML7PhwAt9bZohcrLvqa1i0NIuKRQ92Zeg+7D91jKdNM2QsxUbQciZ\nFdVGmOw6H8HkHsveO3xXI48ewTo1ZoGw0xbNSKBeo2K+xp3Wf/NnHjaQRG1+\nbi+Sb626+zDUdYmMqGqxdcTpnda0eM+guoctneMUgOFANrPivZHu00AKQbKt\npFH9IenT2Rn9+V8SZn8s/AVA7Ov+q3F4DJC6Knhf/YphazqYo2QSd440USNU\nncejoXu5LKEIh4FMaTBuKszp0C6Jn0dITLNfY4MItWOd+adORaZqcOFlO1cA\nd4p/SVFo6kldnjSFWUznhyLFXwtgxoWtgLPSwed7jL52vG6to4Tpss/4ktn0\nibFAKxhc1JrXM9F68RNiwv+nQ3HPob4qajE727HysNzMO+gTe/Jclgqh/oFa\ni0XdVuVSutBSRGEVerW30b1pRgtDUu0/ekpHXx3SPc89PZgu6L/89Pu08fJK\n5sU4I0idlgLiIQPGw4+eoOP+ka/M6eFgzmQ64HYUfIQeAOTyKAmhcGW9Rr1P\ntY8z\r\n=oeHg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGlKu1GD8v5nYePOHgqhJY7WF8EJxihGz9JSLzoX5mM2AiEAi7BgIQNpntJTIIDAWbhIF4KZHfWznhMVsEZ8KCdHm5M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.d75a5f74.0_1629446211670_0.3176660751884617"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.3d79ffe7.0","@material/top-app-bar":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-k2jhwnVnZzVYblWBSrw2YrELPeeBgn5nTlFxKGHtlzaAYUTyBOoHJSc+aQIDXZ0EYcLv+jydezyDvucIKkLTZg==","shasum":"144f418acc9e85b4249239c528d3af01450f2b3d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.3d79ffe7.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+SwCRA9TVsSAnZWagAAM4AQAIpAiZtyv9cwuy+bYe1b\nHWOtYIA9O3owwefgx/uRPMZqWlXllZ1+tRLM5PVW0jIAn/dTzx6aNcrdNQmW\n5qvLGgHXdB/dKHGu+/KcPJX8qhZZ840diQbDM/lLDHOeF/joegeNsmYsLyjJ\nmSgj0L3KCl5inCcDZL/JtDvDFoDl1CXwpfS/4m2C2x1dIWmGGGUCtSF1/2jF\nbcoG5wL8Igz5TaH3sn+bydr2MsqOhKT1bBZztUNut3UTQbSWmGlU93qWRebD\n8G4QZXhOSffTajsidWq+0BXPK5gW9+C8ZJJhyzPSoBnaVShamRI3qqllQ0zc\ncABiXkUpfJFsCheW34CWYNtGCFvr0FwgqbLSwBGqbYTN/kS3P28oj0uwvTth\n857B7TyzqQo1MXhGdYER8+FpCl1+9oDzJ+jpA14zcUosrpgVYHNcjCuM8g0N\nZR0/5ZGobj+DAfn6+2AzGDTDPKPwd/c3soSq5mAu9dnK5Ao5nvCGCEfmotWo\nGN5HhLslBT4lKmCB7LAFNc8QR1cs1qLk6R56MUWW44Z2zw0EZ3z8Vg3LU/YR\n6G81lB49A9JwskRv8iL2VGvtnp8Ae22+Lx5q0/tk9lGUTpzyefUw8oEmkAXL\nYfpiXgX6zcabcEugA3aq5EAkmu7LaibhdZ785INTDP2nM5hB+5ja/OtwAB3s\nSlpZ\r\n=X+CG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEEk5qO2+NW9eXdBlk822/ssewBxsiXqrny0ohKFuUNJAiBgwUCkUoYUXbuSKjzUQdu1IeI5AsdAn2GMcb8ybKjAyA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.3d79ffe7.0_1629480112642_0.8604507811800293"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.02213ebe.0","@material/top-app-bar":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FPMgNNu8QwQpoIQPHpIYL/utkOdLGnosvQBKUnSV/2ObeadWAaQ8NMafNVhS/qvWXcVZa813a74grTZghn7tQw==","shasum":"061db609cb7dca948111d80c8eb1a23343b300fc","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.02213ebe.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+XOCRA9TVsSAnZWagAAAU0P/3af6QzY7ZaDjPlnwBGO\ngU7dsOvDeO+9X61se5NnIcsmxxe+RphUGo10j2A5G8hrtPd39Ob7EMXANHCd\n/5V8b3O7BXyYhWch4GAPBAvcuU4UsEMbcz5/kB4U7D/6cXyeGQ1JElzCfyxr\nAf1pxZvKbTwFFzDrvA81N3WmAyCKUa98tH6uz8zP2PxNZAc0uzqHQpV9A1wy\nDnfxfkwHNdnQe9yP1h188gB2mySgnWwj8HyI7EpZrdysJ2PfCmDlNJEAVETK\n0Vem+jtjG7ozbtlBWbZwq2lBl01iZtx3J1X/Yth4MXLJ4i6yYbABduRHd7PP\nOGMnTeFPyFUWKl1K+Jd9X0atWK4Pl8I1Cmj5+uIUXdwQWllhjkqJS93CgL9K\nW7m1k7zmbn6C5K1wCZKaDEYR4648mOq6r0nmMPsyf9UHFJ3jA2FfEAZ5SHh6\nCufm8J8yng9phLQH/Q6DXH1RuLVspWCq2RmZEFm4DERIDqSUN/PXkdb0w3Nb\n11T+aDYDx58ec0vK7MCwWQgUnqsE2VzI6gBMVE9nL4HlmpSSO7dEUZy5W8yI\ncQQ1WZbOu3sxq1OSi7jlh8iN9v8GJoAEtpGHAxV2aKscuJO3NiQvOhIWrrHD\ntzVbEqLNRncbOxXhd9xRSAuraJHBOm4CslyZrUS+S6lKCXAB48G5T2KT01e2\n28a6\r\n=RgqC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICpnumWnCuijy0GdlQh9wN2eykZwjjLQvDG7XgF//KmjAiAty5/FUWfZe1wBZ8NilVsrUxSvY8bEUkgW8vsr3BW5UQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.02213ebe.0_1629480398685_0.9728902884329802"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.90a999b9.0","@material/top-app-bar":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xll4tvfgr90NeIvMvGPnIrWd7uVaPeocJjcRySxifANW8SFTFjE88CczLezjMZMzJQz+OCqiiozgrXD5LNTkag==","shasum":"544bb8ae9feca9f8044bf9d9fc1ec8f30d7d2fd3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.90a999b9.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/e1CRA9TVsSAnZWagAA6p8P+gJSYR6dbUjMKP1hi0xC\ncKB64umYl7rAOK67UvLE9Rhxph3P0HQNhrFxo0jTzLxDUP/Uk3COS/vvzV/S\noPZzPqRZOJo6I8zvmRPa0YFa4KX5DRGV7k+eZyUZ3GHnd18ivU2iT7T0IsK/\n5wAtWz8vyBGg/K3dEGpJzoO1DjS/moKN4spYoJq8LuPZbJYRKhaWNSV+VXEm\nxfw2Sf5f2xbS1079kQzwsb0CuTjfQUeZ6ZBSHB0n+0QKoB7yZU54M68omAhq\nQ/TUIHeg18IYtqoY+ywD3IS5aR8sKvjENsi+FH8lNnuZ2VVsycl9VMem1gVG\nE+Ki1BGmJ3F9S+eJsFC00M06g7kHxZen/VwijpF+YK+7KWyOBz5HYGVxRfOE\ndT9LMAL4HnSSBp6CovVqm4b08bUPXqVmu5vzmhV1CcwD2hrKzN/ENJuyEPNY\niZ4E3KgOOLBFiluguLQ9QN2kQYAsqbw01S2U5zRvGUjmJNBd6BvnkJyNZYkL\nSFbbt4l4CaIWH4fgf0U9rytr8CV7ANouf18iEyRtk+XoXJVYWMqDln7sWbYP\niHLotC7Mq1DHF9qLT36M8uQRxW3LgsNf2+ofFvTN7OghZzI+BnTUMUqWRoE0\ni/bdEywrvq3QTCeAylpwF2Uo6qhSY17YNWTaC6ssk9NSgP1f/avrgA0FZ1qt\ntWna\r\n=40HP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAFQwHakqGZgvxLUCM3al8aQ3b1EE9vjPmOVMnwDf7qUAiEAlDaAIERRtoJxKzp6FACGsu+j8KlBQW4q/dt3F98bZjE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.90a999b9.0_1629484981413_0.9861136854312982"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.6db58716.0","@material/top-app-bar":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-xnA9TEGlD+WJAUzUsuiWGVdm/r4Nw1yFWBZ+DebxBrMuO0erGsw7LjPZ8uRK/+tCDcjdt5Mt+0uifiP2zAQh6g==","shasum":"083adb6e397fc83cb62ad87d7e87406987d65b01","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.6db58716.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2WLCRA9TVsSAnZWagAAMx0P/R0ySFONCSZ1iDvQm5DU\nx77ajjTrh8HiVptx5jDQgVpAw1cTw0aRjmWDVxEkg/rWpisx6wl6ag/1zBhn\nHIB5urq34MysCoQkS3F8PC/yi6JOdNNgspbOV+lEXyB2MSTuWE8JZxaFVySs\n2+q2vvgQxupahV4B2281aYtaa0mUS7yJwmsqhwpE5sEy/zTX90H1/inx7/9j\nlAGHwzp1HTgsnAXB7lWVfkLVghM30rBrdS5NyJ8aLPw4Nv5qEQWsrD4zkioA\nMoVsAGOa2I8HI7aYw5WzX78laUiVkaarTPvReUpUnUczurY2MP3Lsy2Cx+wt\nJPiZncW8va1a1QQP/U2Pr0azrLh5eQItQYJSJGQc410Cd5XteHk1OlwkukAz\nJK+3bFSHUHZeO3PrV438w5bksXN0aPbUUd9NRdL2Vs/ypwJ8c2M81yNJf+jA\nj9llg+e6pXvCw7b4/sBiIEThNEb66K9LtqtsapveC7Bka92TCKZFVj/qKnKu\njraL/mxxyXmO+al9vDpYrHkYFhOKjqo/lo1LmxpW/qLV7pFo+25ge5V2lgVe\nZzlbiI93CDQCx1xe5ovQ6ZwPqi88pdYn/2tKrpDboZxxAA3OPFg9PPrfeIl1\nqhvosq7XI/Xnj4YsjRibkaFNes9H5+e8L526ZiO1SIadUu2elWbAkuqxTc2c\nii+H\r\n=8dmo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAlxkmo4gv+k93kH1wsRnAkfnBG3/t1+XlKAzEaDxhf1AiBhRHM16YNwAVzFEoo6IlKZNesoVTlBhesXy0ajKBI6sA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.6db58716.0_1629709707762_0.7517866699298321"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.9fb5bc35.0","@material/top-app-bar":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XwellioXd9ADgkxY48y9N5M7DGbRn9+3In613LQjVMkIZBoaMik6v2WSOX0PqSuKoDtBXe6x3qqScV872lsOXw==","shasum":"068705680a5df9b19015cec4a9159411b90ee06a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.9fb5bc35.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCZECRA9TVsSAnZWagAAwK4P/2oE52/Z3G2QjK53cubm\nETphNqiSNaqeS9GvWLSY9qY1FsAiMAx78/8ywjLsbdT8RGsQwNXO9mpS31HJ\nsqmLgMg+enEAnsUcO5agm9QSmDmLblfOWgghbgGuP63BnzSJWxUQeKzl5jko\nbIpA6MsWT8vyYczbdHvDMooMewoeODDz1zZgCYimxPREUtMFb7JcuK7wS0Qo\nuUHtTRAX4jr8AadNjZCZadsRnN6nCUa8sz3yqSQuCH8P5kVhdoAHqyu/yHfW\n6HmPiwGXXSnT/3pqDr268kYknyeAxyX2NvI5yBmPqZOZC6vVP0aMkgkZ8LPe\nB9QXPgpKjRv5jTJ2FNNlePjBDXA9sHF4dTG0zYvAG6ws8tvzPTnZVwhneu7W\nrZg8EvqXBLkwo68dAAZAlcmRXNr5y0Jtn62O2PThlDA2tfjRJ9YIPOXYtYc4\nzMre+ulqRoF9cBv/9hC2+ovXWrZ/jvWqfmVA6hRVv5TErP/vTeowrfx5L4eE\nTPkZevhD1uQ7QEkZRk6aJfbwDHMlV/XFR0ZL/B4T5bpd9aLQNOa2y4u2AtAY\nfii05gFrFEer0+s2YVwGyCmVVO+EaEAR2ugMI0KUni9au7mqEyro9yBXO3YR\nh0HaG62NPPbQTtt4XhPqBzztVL8iHJjsh78gCBEtao2k7gTQHMNVd8FrSLjm\nBwYp\r\n=NqMR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCjff4WdIQTrrm+wu3w202bb5ZxVVkAIOBNG1I2ET8egIhAMeE66FflWapYJHhVngX7WNcp3WgoyVFwLIk1cbOYrKN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.9fb5bc35.0_1629759044726_0.7129583102626962"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.ddaa5d8e.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Jutf/SVi1GEel8gYRzSjuK6iJRGb845UGxB5nl1+8pMEoDZBtqRpvqXEN1G0KYUxSLHWLsdpJXBfbRHzrJupFQ==","shasum":"136fa4c220b9e70c205e89b3482f63f2228dc189","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT9pCRA9TVsSAnZWagAAQfgP/iAJfDCL6zuHd6SkkLoL\nsNPLtc4W86F+BG05/VNQkiguooEnD+EgsAAQb1Tpx/BZ+33HpYhMJvMWhXA0\n2JNrQXrKL+Y/vmDa6t4swc5KHqK9aU8V9sKK62n4To99cbVG3NmTXAU+xwLX\n0P3osTIIctfdtUCFW/QthPet7TdGrl0yq3v6C8nJZUxC9k6pilTKfSx7+49u\neYtyHDYs/ZSJC0krdE28vr6blSN+wnGRE8Z4wAPKN8Q4LDGtDWXS8yTzEmZz\nG0+B++ADnWGLE9XP1Zn6fNKZYM0E5rqOjYpDCo90vWqy4o8MZdfWBobbuyO4\nrJxCF2qGN0BwS5QDN40K14IQRBplBPIs025512m6A4W8pTMnO/fzOQ5MV+qT\n/TnzWnfaTYR+9iuFbvKD5P9SaTDkAUzQBYkfGXyDdsKBXhVeQAW0I0j3IZRi\n0yOeY31tC3yG/CU1TYgNlO3vbLtww1egzC2sh97XwqqG23SPfprGlRZQfKdq\nprwIyJm/m8jIg03rG5MqDIKlD9JuKdO6jL5DOp7ZlYgZwjFGLzyfVDZdLmEN\nqPm2UQ/4cFOAPzzfahXNk0Q0OpmKW6hvkC5lznuzGFdqaiIx+I8wdjLZHXbI\nnNvIeUlRtdwrtcbNWRzOPoFsoGpILNrITv80pnK+zlZBHj9vXQuJqGjRZvNP\n3DS4\r\n=53a8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4s/CUuacMH5nNVluNhT/wcRF26MXccEGHn6MsWMH1cAIhAJQ6DJk1OE1Dm1y7b3Uef96C1h5rp/RmSJwr2b4MGzvq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.ddaa5d8e.0_1629831016945_0.12723268909326002"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.756208fb.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZOEupFvoHBWaLUcStz/VzUfrU4EB6ynYLx/oqwV7ugnq3PLb5mPN5WZcPceGGP7CzGpQuVhZFmjZoqLjGhvacQ==","shasum":"6e7922b71860e7d4e37b262ffd30db7a5ba1898d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.756208fb.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp8uCRA9TVsSAnZWagAAiJwP/A/Pul0ADQ885mlwa58B\nLRA/q5cdNW7obZAHfcxaFTnb5dJaIRYnj5f4uB82aVtLxFryoFJC/GVXKEsq\nM/2QYKMCxQ1g8yEfOGaFYywqMwDBPBNOp79f5w6JICEBZn+zzau+cLmcrVEy\nUFhyd0SIh4iQftU+opaSyh3+Bwz4+Qxe1dp+jlXxu2dMQgYiQBeEvxV05cyS\nlbAL32lYj/tv5yZqq1LNwDPtsdUObHXD6x+p82uGxUluWDyYM6CiSzPntcWy\n+WsMmWrkUOq0nF+9kwK16ZgqPFy0LX5pAYUrzkoXzsixNuidL5JFNmtFsG4k\ngF7Si+yVAAWwglamFiMgnYYwnNzbppWMefN7lb/c5ZV6KBfiVjnchLIokI4F\n3Wg0p7AnIx2dEk0aBwhq3YlrPP+16Y2Zj1GSNqiwSB3ZOFm58k135e8d1auP\n3ROcRnu37ZfBCGwzFsN4wiLlqtsOO5ZNNvOoaloysSEH3a4mOQFgmoD9c6g6\nBqwPHD8Gw9Bhd9t+xid43yTsfs0e9BBi6IMjnCba8MaUvDA79rOyHRYFEOED\nT/4IeaZmZUyAf8ojKUzofGZJgg7vx7Bc82SioB2Mleu9twMIHzK+O7O8YAUC\nO0v/7+E11ACtA2NvOU+2QFc1I/D4uKdkZdbvBdR5rVOH5+aEXlqhMDvT6b2Q\nWjcZ\r\n=o4ny\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICWmffoqNqGEgIHc1gdppNxeMQkM7ne153P7/pR+VYB0AiEAh5+q2RgiLuLRSVrmAcSKsnzki1OlSM542KA63wAPvCE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.756208fb.0_1629921070829_0.34803478816388456"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.9576dcd9.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3sHOWRm5Lxix0uU6J0Ai8zpSI/jfSRevIk7kzZG43o6iprmbIXVbH37vLF/0RZ1uQNwLJYm6VO4RBog1AT/CfA==","shasum":"1ee124c430df15f5e6939fae829751de2066face","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.9576dcd9.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrm1CRA9TVsSAnZWagAAZ3IQAJ3X9KkXCwYZPF+6E36e\nTYUdmSNN6vJtPzd4gVXCJf4lt6B85QXMuERRBmChOg4JYMLU+UahxcahSZOm\n4anZDGEf3ZvuNJjiBHT0+gVE0dfvHh6jSSZCyFWgc2jkG87diz75p25PTiEx\nr1pAFz7TxsOySY1NVnago5KQGcf9PaBzoExjisck0kb5WVtzP8HdEHFUdX+u\n0aYMWso8OqMyNhcyyiVSK2Da/Ex3b948qlm1vqY6vZ8JHlyXo68Nl/V/4QOI\n1hOdYTo5JJe802PjsnXDFAlti6SjkJxqccfLDCJoCvI2va85bF9ySSQCFABZ\n2/CkSLrlkw9RfH/rFTzniEuwOCtq5xrh8OshpHCEL3Y8Rlxwi4N9487sOtpE\nuEtFe7+ZNTVM2cKyWMKxC26OqenhBHbqiy22UxH4zIg+FGOraMmbyfqlL/8K\nd1pDvDDA7aEwg1VdEfvBwZ977mxvAP+yBX5SCuo3SV5XttDEDxCf0MFCdJg7\nBAQzvngpjl4RTzAlhoVj6KIiO3IBBNfuFQbSm2xSFg6hvRLrGVBotEqlee/k\nnQ3TX+aQ16H2uT9+jHvi+jE7Zfmu23gUsDHvp5IlBn2vi75sy8M2CB2zZyGb\n6NGd0GgmuILYaS2yn++W4Me2A47Qv1xkpATfkkDJ0mRk6cG26OCmrPzujz7b\nd2vA\r\n=97nB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvrgi3KhchkNtXFRWfLp+PF/734V4fn/2pUBLcXxJjlQIgFc64zK1ykKd20HZtiLEmHg3YQ/VafP5KeaDWg/WxAgs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.9576dcd9.0_1629927861620_0.019728933125167547"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.7531cf97.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oiNgB1h65T8LO6AZ9iOw6iL/iOZnhZv2Xj0zF7M87LuLgsAMIcZhdGLLTgj8UYM2MCE/VKXYWpnuCwln+pPfqQ==","shasum":"574546d18eac0607f2da1a9e930e77854d2ce015","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.7531cf97.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ87NCRA9TVsSAnZWagAATv8P/RZkkMh7D4uknfC1Lwkj\nCnXlwE0YKRHO//IURJoudvFvvGA0rhpO9Gk8jZ+b0BfTH/IZu2UDJ2pKI9d/\nj7cnVKFhSEkrLTT4zpC6OpaHawq7rFM+BPOWDAeESz+dLPVSK3B6/jAES9Fr\nhepboUHxSX1sAgrWk0oDvNKX6hsmLMsZo0unChMrGFT1qQlsgKTcyGfXQZA1\n9Ei2HYfyT4XP9yydoQ1WylVI+vYNefyxPrdBk6y3oD9Pv/vy0RaX1o+s1opY\nu2W4vHnjhlmYVdThACXsbBIwwt5sjkMmV2J43oMZgwIFXhuGmK4QVdzoU5T6\nfVQ4LiO/38PerCdeBFypqlFunkHQ2oXKsvatgpve+sV0x9gwKK7nk4evzfYK\nEhvz7FZyEU0G5sdLd2xQfENwk+QX4V4vDvvyEGQWxT+sck6LvkR8hStBNlak\ngNGFPD+YFBcJFpoRuooN6Y9kCIajN7CjWvnVVQ7608vRs6TC74QNUefhWNxC\n00Odzo5Z2xTx29P1OOq0mmpHvNhx1WKEt2QqpWBSJpb1WIhfeSTBu5QfE3pJ\nHGR3QrJOJV6lCquehDUlJbdXy2eD10VhwhQkXY6KWGqmDuY38z1rNPU0s0+d\nMsop1K7SR0uXoJpOxdU8bCgGOnhLdMLTEz/C0jtSPOSOz8YkirfW1GR+6WH0\nvc4/\r\n=w1Tf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEvKCedkOWA+2V+rfl+EYizetnvGAWenWh/9Jf7SjfrQAiEA/GC1T6Xq9zrA24oXIN/Scsyi1+nP5+hPGDqe17vF9PE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.7531cf97.0_1629998797309_0.27023516140571124"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.3bab26b4.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-y/T78doK8rFwy/969d7t6qNSnJzjqqaKPCWbsofsBfEq0xrZQj/N7LevLTHvvPrXA7YkD0Wxmh1njrOSBa/oxA==","shasum":"edd5a57b93388dd074820095354570f0a63c6683","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.3bab26b4.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAtsCRA9TVsSAnZWagAAYW8QAJU7HoT89uHhrInvSMsg\nB8JePlP4eqJYcpsDVxFsLpyHYTThusD/GWVqdtrchibYZcxXoknRu/N3nGib\n8gMqZdoUFHZltDGiWlaTvk87KNtzZSI8deU/ivwcWECvQiL8aSHwKVsw6TL7\ndWQnUR0m3RukQX4uajs1v7azfS2RrnCGpbSsm31ML2Ht1ykUiCbhPjOoEdg1\nVhNwv3FEhZRP2QqFA1Q8mmwEOEGc5nyGWRte6zM4YNAYT+aTNuAqx8d36fVv\nfyNXeodhhAMzHaqeHPg41d7s0WiFAMs15lDKfdzeNoiBEfRzPZ1v+ZQJbTOF\nLlINXpJtIID/x9BtApRF6Dswe+J4FTuuyEf8hXPg3tWi5aerxbCYk/071xsj\npArgIWfBstexwMLigsYRozCFD1fOTMkU31pOFMqCneAS9edT91Sg/nv0xUr6\nCm2Y9ZK6wo1md1QgvOSPF91Zgzih5qDrjbwbONDTyTDRseeuUIeU9Rewbllk\n0MF6/M7Sl82DKVfC4vpgAZMX91nz0VuwEsulJ7V/JDxenfoIsDIrkOeh4QA+\nnm1xHwM+sqcaDcUBd4M9uZ9OJNrCABfectD1zxwrRLIz75i9NWRnb1rNkpHu\ncd8HdKFOBIIr0V3Maag44TtHIMZ7B7mG2hoPI8h2m7BR8Fyj96eOyoGGLiLb\n+EJp\r\n=pqU5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH14Das1Umjg81uiJp5yKYwLQLwTejrhvfXQrqOoM7yxAiEAh8zMhK5RBge+gFnPv3+5tT6qVqwEdBQIxZgXlCFWO9c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.3bab26b4.0_1630014316129_0.9371577478888966"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.fab48bee.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-niKzHOGUkGYI//WKxK6BgjVTA08/0lgwXiSbDpPcUsIYGtiqaaXUJRJNfwyEMk8Suo4AOIn7OA9nLNaRQODPNA==","shasum":"077e43ede749be18cad2025b99d75cccbdf9fa0f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.fab48bee.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBDGCRA9TVsSAnZWagAA0hEP/3ZRBpKYcGT4U9gdDXBd\nlWNWN+zOPSM6VtCLul/xCNn42uLB9yQO577hwv8GxGYTMGNX5cDgQAIqKsyy\nMFIXI98G7y9y0d+NO89KQkpJZBIza2Tf9e+KvhHEK0/jjMeGBhEDHJt4yJAy\nzCZQ3Xhr6CiH3dkc15jp0PWOocfSFV6L6TduI48DV2cJZJGZ4YJvj30jP8Gt\nnQnSXtjroklXrRaHLiwZ1YdN1t5PJrItguN35mRlShj1E2ZIGQU/4OBDAQfw\n8lcxEiA11WtAxszkXhOQgPCzwi6NerclK0JosNCPZ3E/97JENPX+LjrmOmPt\nkvyFjDl7tEA4zmvsyFjdtKRDHqXtI2f8PdusibsF6lVAPYA8bn6uqGq06Bsk\n2bLXNWyTMlpct87fUb81uVK1hX1eab+hkfMaffvCZ62Gi3DFU9JFJTG0ZIz8\nTDPl+BtUyEVmkJabwETIuS6MPzpab+vD2Le1VQoie9RVsgwSbL74rthBhgS7\nwqn8Mnr9xHkeyiuoWMmaVRHYvo3dtE5FfKk1bGkOpaWuxiBhMi4nc2JzVdlw\nJbaNkMuFXmqJ0ptmy+Pfrycq4nD9DEJyh2+kgv8kOyg4Z+9CyK5oIeK8iXvS\ndy3PFDPQjQa0xEqQEE7URFZSx9ZCPHK4/Jpza+KP3pI39h0LZBroNOf6LpYW\ndnHf\r\n=uJn7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBySM3JLMpu6dE3IE3b2b/AMZpT0qFFt4a0OLVbyLOPEAiAp9e1+f5+cqqhN5mCd1eFP6Rq4S6CWItfLsPkiOhz6kw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.fab48bee.0_1630015686711_0.7904661683964007"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.dec18df7.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ws22blq1RigCyeB0VEK9/avimRqyZVdCvbVNaE9WvvDnliju4FdHqT2vV7WrjXPfZU34T5PsxX6QzoBPInf+gg==","shasum":"208a22e26c60f4b612647b18d9a2f4792db398db","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.dec18df7.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJbkCRA9TVsSAnZWagAA4PcP/2F1nW3oLJ5jc3+8t8sl\nT+wE2abF1przfO/6lDEw0NSXZ+JarnESc8YA+f5O5E13nAlNL4YPubaXPUgz\ne9Nc1N+fJnSCAk7iad3XBHpN+d2rKnCLi12CHEoEmOiL39g0zuIyt/oNIE/U\n1teFviAqKQMVlve+z2tiRZu+o7TkryCY/tjGLoV9XrBoYpCbBcOBpphlHyj6\necfLSqYjswMI/VEI3bRP7mhk/tBw8dkG+q7m2jt5M2JDgxjYgKdzpNmdd9BX\ne6YQ8CZO/HwMJ3dK1Kkx36USKfYicDTP0L0KlZyoNBIhC9UU8KdZYnsOLidC\nI6fgzJ+y6HgKT/TFlWuCDpq7f3ULFVKQgd35FIUXEGwieVegZ0awxrFwmhXq\ny2uFjrnPRqaVtCoxngi0wlS9brTh/pMjgs1RN0mGdS+MyzAWILOnsuJSR9j6\nMQ5zk8NBQ8zysI5S2T5TDctP/bPLpJOxfJJSD3BtzL+3SCgYzhzP40tN0368\nmCSNd5TqIwcsLBrsE6kKWAsCvPOwDQul7jhHOGgJbHGJZYRGfI6RYnqBFuwh\nPnXRKTGN4IocRIVJ6nTIrWKtJBLNv+CkfvRGvkTTWIUJ2Ou7WUIO687ZPNVk\nuStgDhIN8Nm2SMLKlR6S7BBs8+o1gEzlc9esU7w7bd76nMA2NZgAMyx4rhxy\nB6On\r\n=Ik9O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEifCpFdsfvhKQ+SfgyzDgQGBuSwVZViWRywVJcIsB+OAiEAil/UE6v8IPUXEZorEkgE0EMYp1f3Bilf3w1hAR6VF6M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.dec18df7.0_1630312164532_0.9633917889442123"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.61fe5b17.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UDHzu78Nvp+flXuuWyDY4RZj/FRHyHmhfwABZyqIjMxRTAgm/8QOfsMU5h9oavYp+8LHqIxG4KOir3N/KjNKcQ==","shasum":"2f46e3057fb5a9ba4837b781cf19f67d39bc82f0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.61fe5b17.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTGFCRA9TVsSAnZWagAAb1sP/RMjMqkeJB/CJCxz6Lmn\nNocPCZa8GBVjIbdG5t9gsOlM1r28eXiKFvFsu3j/BfnPaKllveAmSQ1k63c1\n6BhQfiHOCVBLgsFynn/lVxKYt+/3QCc6yO5G6qljHI176fuOV7Qi9WTgOOJ6\neBh7NF/GXFUf9K+9iNuux4SjdRRP7tAV7MC5X3BXfDAup6b35/nTv7x2lCNB\nx+N+bq8Yr82NimN0awJIPusohBjWchV4g3EXnCoF9YetBuXW113H0tH10/Is\nrgzY1KyMq1MHb0nyKiFGX68a3fYjBHW5VP/i0ZvkQbxiA+Q09YsbGERC7ACC\nu3uDOGDF1+qtGiuvbr3Jp2wLjAPC3/FK9XKs0nj13enqfvwGwjS9bLiE6md5\nYk/zbCCbLpJwLo8y5/02MRUpVOM6OAV2/HZluGIQXZSXqy3/h96VXhq6G7N/\nHNZguPtEQstmpJVvw1yomoMr+psa54oNGtHOYu2dCxtJsNKdm01+3iw10xNt\nECW8+r8TCSCd9uESJESAIvRWYaY8Vc+M6bbfBknNWD5jitSi4Bd1flLTmUnd\nRFDoNFvE7wNQxVZLEkY7Q7KVPDhNs9ZnyT+ZTi02QwaufdQSDyzKta7po1AX\nkDDmPOL/AxBX7y3XfoL5nyVWXcFD1s69umKopVI+Oc9TzTxhqMqn5XgtBUFb\nraju\r\n=A/sE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgp8onThdbxJolzgrHMFD3Fmx+Dt7p6YUOkWIXQsVLOQIgMB9otfnCeufw/YGyq1TVwlusrREbmGGBAQ3m+EK8cAQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.61fe5b17.0_1630351749625_0.5518910451334649"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.a8c31f54.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3arqA3xRYU5T3j/TGIqOFQ3Jxo6+MN94gFTUKeVfRKzI0qUwCy4MdcEX5G7jBDE4LETpxdT9NTkrfRsR3Z/Gng==","shasum":"ccbea51a4f57984bb369117e66d2baa7304bf006","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.a8c31f54.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUA8CRA9TVsSAnZWagAAYcMP/0owjPbj0MLsGq9cxONY\n4TEB3YZTrSv5GXHMHHc9/Vtr8O6/tRz5lKoifmTwpf4X9PcXQtXFMxv+BxvD\nETJhYEESolO2j0mwLWX7lDPL73aMes1xXJqHR2RFpCbCT4LIAGPaMDOZcvsV\nhyg+PEiNCg8RgpRPJzM8o4FTkeMkofo4puBZs9mSgxLSYAK15bzm2+C2XOSu\nTW1jc4GhitvuJXxqViESFXrafEc2hA7Mf5BzIzhPziI2/XphM1bHizphcjL+\n4XvojTjA2ecIEYGUAvl3sepmApATbmWfmitceTzCFbXbL2jTlYUf5NXB5NdT\n6FEcSSuUi8e+DTEsv4mRuf83TS+bUpj1EEy3mA7oND3MqswQkqjnRP7Qzm68\nr+ZKibSIp5bNfZiHBJYVZmogNzLNfcc1YYYNYxoYJkemM0QiuwU0dnC8So1e\nl/qAmkKamVhQX6qYs0VLGbHVDLGvh0QnXAHy3SqB2k2l0aRD2UGNGvh2a3uS\naTwQLqwafs0ADeMnzYp34we4bDt9codrv3f47L5Qy/rumG8xsfJRzhUlFvbF\n4D5n/U7wZ3nsEVEn5iBl1StDY6EHZMTW7JgmvF/CGjnG+UBTHhIEFtn6brFP\nw5N/vXxD0H1y6NRJiTg9bkAPBcd4rqlNAFV4yoDclOP/0hKiGn67teo9Cd1D\nUb2C\r\n=fOUu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDrvsPyOw8W3cMwipm3GNLGHdBL5dEt5ACjgA9O4IPRogIhALMlsd/sFRrnEbf4IChhMnu+AAIuuOlI2RDAK7y17PuV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.a8c31f54.0_1630355516656_0.03906661944271628"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.a096dba8.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+Y7jUvkinmE5oy9kYJCJS6vjgrFU/IjLh+/++P3oomdIWFRYjgLESR8GUCracyui2kqqE2/KMkUxELuG+PJLvQ==","shasum":"e834220dfa938d7a7dbf05373ef0ae8e0e80ae17","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.a096dba8.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqrrCRA9TVsSAnZWagAAu/cP/134HeUCNOC7FkkRH5DE\nFn0VtlF1uYqWVt9St0amtKOTxit7z7lI8OJ1uVANtlHykRYsF0Vo6PJZxtOB\n4CrMOdvioc3FrOdsa/YqfxY7dGcqWoF0FwcLLMqdPH/z+S+sopt8VLEPrwqC\nW5tesHQx63uvD0dGOz/BniP1awbmbiHhn/qL9mcqcPIBio7yIt1UQLSDKjpq\n5NlQJHvARF53z3Ru/Wi+TwVZBGtls+dSUhcKc36z1xyYiXMAXO8+6logoF+j\npGBz3BGQejCWkD1uib5286PC2O6SlrEfuknoIHogeeBGhCjxQoUUp4OwJH5l\n3J0kY7bLR2EK6mpdhA1QwTn1cm0SySHQr0DVsDFUDIjfP++7e98BwnXqT5Iz\nZ3pqr3XjbA/uDYqfD/uVeZMsn7ZdOmzDQumnHsgoeW2GAXROKx6wq9LSDG6h\nHTrqD4odApqoXv2nYp9BwyxXCS54WYg2tTTfGj38wghZyMc5D5CM2MWgv2yz\nrndYQulZtRA7Hv92ER9G3ctolfA6oDjBzraejlXchgofWhuRojUDLcVDbIxr\nhKAQpmoQ6rxlkOLxzA41+pmuFKAO3WHJf8AcRKmdmrngYx0PM/kA6xW3j7+6\noP0d3BkjutwaCI0eKSSTeNlXKR3e/P8FuE7DAbmYrc6R9Pq3dkwKbHmAiEWE\n51dG\r\n=8XTg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDIXfnx9CoWFRIHUZfXepo2/vNwo5s8yQ3QkSggdHb9tAiBJdMs9syFJk/UhWFbu0GUEt9cZQCrImtUeaSsu8++KEQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.a096dba8.0_1630448362957_0.7977085442377321"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.7ec04d47.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-HJJjAzs8EJufTN8dLmGWnAV2hGxWBA4D4S+K7VzIYuSkKL/Mk+V4WsaQxssKAlP7zR9bslRUkaJ2+onm6P8qGA==","shasum":"5f67e81ac4eb4222c53a6385b2835921755e3841","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.7ec04d47.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV2BCRA9TVsSAnZWagAAh/IQAIUmWP7GSbdLxj1T8v0w\nwV86EOGOsoQGOI2Y4U5c25APKldiaw96NE1CEb7zSDESG6WJ0FhEqtxFMnQo\nF9q9VjrJ1SOPtqG3bvar0fft28cjh7TH0Hwgj39BxYv2NTCcDQZGvKQHHuGH\nRvoEnRhr0CX15XOv3bnMOrio2gRIoQ5V18THqZsgeELM6OVLZPNZ4tV87eT9\nXLCp23+fN4dq71b476GYXR+HoXzsn0svxfAJgp9othnVQUzsd5EmMHLBHkQk\nluVba+Xu7jaRAuQ5HmfTNDViGjTtHpDu5hPMxs5I1Ajsk8AIlyOceA9p1yqy\ngr8+lgQ0GjQgrVr1O+1bB+A0k52tDvDvg2K+TgzEjUqpMnwEHxU44bK9i8Zh\n1/nruFy7G44eT91GQFP3j68hlF0UycAUX4/JmfyF1Rqjt+hBt4+9wm7lXrNL\nGp64vho36tLHyTjTJ3siFJ51dttlVNamkM8tLyhsqPAOrNoAWVONrnNpNwJO\nFgeRp8B1QDWNcNLyiL/gl/2ZiGKCnwnZSbm5BOPQPl7/7AKdPQ5tsjvgqJ3K\nBvGP8gpwoMHmVE36QRXnr0DUN30ZAGenaCIMbhMEiTTHqyM9Zo72VmbhN8r7\nw1skSpn/N/mnmwUv2kz689weRoA4fxZgsnDybV2s1DTBGXwhcgxyBBm9eNus\nZawZ\r\n=IRG+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDM5rHRMBE3w40BbeDD+NU5Dz47+azWF0vSK0J5fEPLbAIhAKakp4qxMhyETghwNElvI9DAt+S4eOmC7sbPyyZ1/crv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.7ec04d47.0_1630625152880_0.16832648222657376"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.d00b098d.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XFPmcpJlxtyoCIIh7uClJkOSnqajRjt/0r7rOp0GT6A6A2V+s6TDUPyW6Rh9ZPf6G2oASIPXl0ajAcjWgtaPow==","shasum":"3950b905895e405764a5354afc29ce4f658f4204","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.d00b098d.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpMpCRA9TVsSAnZWagAAjaMQAJg4o538BfzXIc6xqr9M\nq1Ul0HOsntJIhn7CqVbOoauZw0GZrLJ0Gzlwjy84UgShGNtwUF2k1JSfifJN\nFMzRsnSZBRLFk5c2hYdk+MZ9gy0PsNw2B+PNHXdcjHPO3qlb3xS0l9tXHDYd\npatAgJrXerCCuEgY6xkvO2nkqoWR2gtyaW5UzAqLHX1YBqfzazX5HHZMdp27\nV5HnAn1Fj5iAAkVnC/EBIV/AhZStpaBOo1nW2rVuqIrrFob9EgrmCUOmuerd\nNcAof/aj4PQCNJgOrYaYJPtBOFZE2Oar++OyFnfaDdM1LZbOba0L1ifqCA1A\n/uEbbRChTMqIXhj/pSsVWJyMYwGV+QvzHreuQDwFp/pYUm0QOvDkwplyNOvt\nKssbnYg09H8hspge4Y3CO5Cv9Q+1KBxJWkNG+QjV+XUE2glOWonBNVjN9Hpl\nh1IqwvbHXPGUq+JgOYG8P+dNiwqSlUR42Fa2Cghq5xf5QxTbPHdfK/P1ttyw\nrXSjw3djiDfE3eLJNKV06PB0d+MofoeZ7YDS46B/qValufh5NJwsESAMU0OR\n3wJBbzZZIf2b2m3zGoL2okewOJxK57nplRscgPDrcepywcJqob6u2uWsECo2\nMtSRzZ6U7UX/3Nqmr+rjrGsIaIRuUtLA6OD4KoZNMxIEh4hJlUyeVFN/ngoR\nziUp\r\n=Z8dz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHb5nc4ucS+pkEzLSNy5XEjOIz3BibIK9+QVqPoVETthAiALZheuk380IMXEG2SHre85dettaj1ou+uhK/AaETSM7A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.d00b098d.0_1630704425565_0.2294663474998344"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.f29b3352.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-P1nS9KYqkJARxGUnrOljlhhXBVju3U4bRNsvUD7P5115V27cca3OOZGq/fIKQUcENkscNoUWynLdc05ipbrSHw==","shasum":"6e2c52792f7d56fa4144fb0f41378771223a68ec","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.f29b3352.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6yCCRA9TVsSAnZWagAAaRUP/3Jla3H5jSqHd+UFvrrS\nKUJTgEok6gyUz/aoze1KoutCNkVn6+iiFdHBFJxQrDkgpGW6v3bxLEQEYO9K\n/GDW/J/WxPd9U8J5QTxy63ojDIljitPayQRvA32++ilqVnMGPBC7sCR7U+sx\nDTr13VA0cW/10lEfkXy6UWw0VYOpe+YOhErYM3S2QgtBT1U68MTRrv2+B/54\nVEult+IduGhvZwurM3jQKb5/H9ya5S0bC7rC1Dz0YJevb+NPZlaUOoLqPyPc\nYjt1yF1nT+z47eo/NoevlLmZojpjGNx6nzYwvuuKeE0qJBF8DrAyozwgBvhV\ncvR/AXeFsYyLN3vFdNIOkIecmzd6MbITkyHyV4zfjf0ebeXQ8FGNq1OtLtdJ\nc0wyWkGPFyAjmFkYwE+5Ra8w6VwSsY2XCiQxfcHhtD0tpvutvPJ0Vtqh6Lry\nswfwV9cINLP5AwvJu967rApthl91Z8f+T86zGl4yJXCGK8xb6VL5DSS3/ScX\nf6A+/Gnl+r74whx6GnMjPKmB2OSxq855KD+RxQj6wkkIvf9o9mf9Sby2PfNv\nDhJH0/CIzDMO2vMfDcBIP907HBvzgdAKWTZINyN0RQRwrarNl0n77dNeU9Hs\nOya3zvF7ubq7TBRguinag/WCd6JrqbOY9ikobfBxvzMMbbuBTm4SoQj2I7FH\n8L9z\r\n=0z08\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9K9wf5emgK/o+s3ZYmrmW+GDxl1zbgbev7IiLN2/BWQIgMa0BKm8qHE0P3QeRK32EFNS6MbJjBGvagrXV/hnA7gs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.f29b3352.0_1631038594046_0.9635260723293433"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.4962a163.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LGfIOBsd370DNpwUeAD302TaQKefQFLJiQFCze+SkynWSa6L7k5Fkt33WCdP0vN++R3yrIbS5mUEzB2WBSrGhg==","shasum":"10b7aae78c5a7ea0554c21bd2ec56b869f42143a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.4962a163.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/uLCRA9TVsSAnZWagAAGHIQAJFu5tKzy3FbK3gnWoBc\nP1cD5UicOPk8EJov4OV/nEggktotUA+jHswWZyhljyVcVePAln1xvbeOUMYj\nQITPZgpLxO7hci2BM1q7HrCqii62FzApw5YItpwcPKF6BEtzz0KkEQT/8zlw\nWF8fvcqv5FSqxLiy7BPK+Dpag35QVem0WbnpcLSXxupEdBJwbAX01acWFvMU\nVWqewSCWCv9FSia2mFsg5T40iXFnB80gKlkCVjHfHTqGV6k6dHZO5dpmMraE\n5kU34OgkPumqeSW4jkfFz8jjHjms+19SyaBMaSi1YrI0l3USi4BoXsR33JEN\n/UTEXZofDQxWG5zDgE6VN12eRU/bGLtReD4F7Evbe8KW15Mfwy2tfpckdMES\n147vmqlHdhsfSXh8aEi2drWvG793MWY9Xd/qnZUO5U2/vOlgpKmxinJMmcJ9\nIEki/mtBF2uI3slmHJA2DdzlD7CKCjbCz+1gz6p3xBAIQSoe7Wql4Rl1X+0S\nKeI6oZEpJ1dq7V6ZVogSCZJXk6vi6rHC3r+aPhdlEFwmM+6HjuEcOTCnShS+\nYXz99QSbjP1NDBRMX74xofv1ljjnutkA3WA8jGDG3xv3gTE+jha2zzHkVL03\nMne/Ll9w8HnefwzkQIfzZv/vjGeMqKeljADC6b6hyqq3/9+jUk/ABbbAUz1Q\ni7Te\r\n=roLx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDPs2uJYluKtyNSX6zVESeuZ0mp1uoKE43URnGSsxe3dgIhAINV+Rz2j/bY0XtEQZkC7l58pd4P/oQbxehin2ORUHJX"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.4962a163.0_1631058827247_0.010629072515505822"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.33102bf4.0","@material/top-app-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-mbSd3GYfOupj/DBp380RiZqjygz3+SajGW/wf0oZ7CqW8BG2JzHzQ/mmytYyGIc1umt2XQgQf865y8ZLN3l67g==","shasum":"e08b90ca78ee30fb0d6f83f9f21c0a1435a7f646","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.33102bf4.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOABHCRA9TVsSAnZWagAArYUP/R3Y/S57P0MnNIj0Y4I8\nNI5FoLfhyIMfVZWJdEB0R7DPwza+UWag/ntSYbuZuxXtP/dt+o4mgHKeI7iq\n19AvV5eTFrX4/EZbagiBsWJDbcoC0K+17vaURLQHFy8eC/RZkBHwwMyxWVil\n0Le5ICnVIBE+CLGbNIMOLdKfmWl7e2YZGQGUjYPg8bDZIoLYU5rELV36DtOG\ngDihdIVO5OZ73LcV56q7+k0yRYd3LkIEEG50/Sk2iB0vR35JEg9L5/iTg+fS\nyG57RyjlmghXozn/g6UzlfMXdPUQfzxUg8jokfmsi5kF8kAHa8NKcLSB2N5v\nUQTjX3+9PieUWGRwa8KzsXgpNjp//aO6xHqQ3vl6jKtxnpNnXucHBnXtoIgZ\nrZKEV7YIqb5XRe/z6w/clkgx9yJu/9wwouHiGGDfDRd7Uy1C4L+avxAqKP57\neL99ags1v8K3Nbvc/Z6TR47SAk044sYAw4/mxs/Fbcp10zsSvercFfVVvdXj\nFGZ6DUDEWmTrxt01F9mb7i4uGJJUJQ1RQrPDDWHAGy56PmfhygD7c2kwVFH5\nug8hDQMgIM+DQfhszbxkMu7PdlNN5X1Kt38HbexZVbjQ3GzQBn/qYkPE2/lC\nvZFeLnDYR6IgPvMqUbx3x3HlWGzpHSY5jdP2FSvPCyriZ2RBkZUuvVo+6WPy\nGoQz\r\n=Swg0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA8/BcY/rsLRGhkpYn76tHzYNmLZTOLeXwe9GxOGkmtVAiALJapn3Ue/OVt6khjRKsmVe9dJBTFoXK/9qiZIKtQLBQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.33102bf4.0_1631060039564_0.3530736915540045"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.76c68381.0","@material/top-app-bar":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dbxfJ6HnSzTXNzgCIJRcYStK8HStS89s8L55HZ6EciMlfCAUyWvQJ2KUTj++SvSWRcYvD8ngPQTx8fH7g+oJBA==","shasum":"2fc9f31cad8183b25e09305cda9e8afa0067e8d8","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.76c68381.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORmSCRA9TVsSAnZWagAAPP0P/3o9NB6TZky4MqZmQArG\nkAiaWQHfQdyMKwJb5U300NycFJjf2xsRDubYZ29R4OxFYPzkcgCAa+xVu8L6\nSZfvBEZzKHeUdLTrMmc0J1AmpBYh753poSRNDqpBmC1H2bsunr5dC4jcDSQD\nwwHEyzmerqlZdfqplVAnJ6U7m75aBxAYh2BSmZ3o5xH+le1XdJ+9ERuQ2KlE\nEFJEn1G8djJnY+Z4HylbD/td+KvUgElUGrrwCJmMmR/aOmnKT9iStI+aJbLR\nn/3BanRsE6hyGB6Sd/YrADpY2kH7XI19rS9QhhdFNq0/edpR6oSIwGG6Z5qZ\n7wvQTck63y5kEsTaydQsLnXROM4czmsewBrdyAzWCCq9up/wX/5seVPlbmOY\neeZblDbOoiCw7rMIluZ0PMzchRABvOMEvBV/BZWaZOTUinasIq/TkrD3xpFl\nA5/HCKRjIReZXPswVdIfu48qJORO53U6/8R/T0sQlQ/1G6cAiwDimuwYEEX3\n96HidwH5hc1Oa8pvR28L+Tnsx1KedffZrDgmk5KWj/RL/wPPasbps7x1xCgg\nwTr64kjyoWpoNVkXirDQrpglFJPT+eMNeWo2t327azS08RMrh8waZzC3LGnq\nKd1Qz5hQ5aw/CwV6bnpV0HJy2Dk0ddCCJ2HC4ixbwT94v1coXl+031UOIAwE\n3MtV\r\n=7PmW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHC+/8y1cyTezn672FCz8B1jla8MIgO2O1BMYfJEj0OQAiBiG/t54gSRdVc7YOMPZbmZCS0N0yu273xscFgh4T9b3w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.76c68381.0_1631132050689_0.3655330979158249"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.17d51f76.0","@material/top-app-bar":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GHCad6q842QbKwzrEGFfOS+C2AMtc6EW+DqFyZN4tZ3BmJnSGVwZlXShI4IOkWPpCyOs8ycvpU/fpHjhrCu1kg==","shasum":"e03a4b4842a0820551522d9aec099af99ddabd00","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.17d51f76.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUazCRA9TVsSAnZWagAAzgwP/1SOOq9sXtJ/J8JWoMPA\nFlJUcQ84+LhdYoWQlFXLBSxek8pIKkSLhSqH+tp9lwXiPKS2eQ9DvD0cxpUs\nJ+1F/UJG8B0xTZErxnFwMImC7SdNAfKlU9omRsa8Gk0MI2gvoijR6zWGTgJa\nj2wnzlzZHJ7Sv+toRehg5VyRDAn2rfpgCKmC924EPG1M+2bOQ4jNanLLFJro\nKCaXmQQwIaeMRiJRvBxuEIO88Qj2+1b28pRJVpatfv5FDCrWbRh/J+2kETgF\nBscHWkzWNtoSmgYadby5rOYULge2+8bixkfexD4Ot7bzYaJX/6yK/OAMHvfO\nlBZzTDvCJ1+5umNSknAikJPKnKLGjIazB+lKkpftRH3yyuYYrh+v6XVMGr+S\ngZfk+n6zgjRCLc4AmBXy6/PSTyAKuwTJFqBFKmhX4kyCJWAyj2wYDabk/e6J\nunnxeBbqFD3LY+D0CfXrvRHGoCRNhkEu7DLsXOZMFNoOzxlLhligM9IF/MPs\nRaCd0dd2SRGrped/hsQjDVw8Jo5jpxVc9JhsoROGmI7U0PfWl8IS4OYRJkrg\n4bR1nv7GQuGEC+XVkIUT325AsAZFblcWp1AwUsW2/wQmCgan6C1RuuSvMGJq\nI9LqRB643FEah7YwW19xVZPgUaBhs9JNmqACU3CgOQ7UdMUi0K0RiybdsipE\n2JEF\r\n=sRfb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOPW18pO8mhOtmrMoSmfpbdD85eIrYS6U+VEZu8z4GngIgKF/altny/IstbaOY0/jx8lopEezo5W1fmEfWdZXAlmI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.17d51f76.0_1631143603808_0.6322329358471419"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.3fae6c2d.0","@material/top-app-bar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-S1eQTtc0tiM3578jHDsCBWPd4HkEDI4/gw6j1ErQcRohzeoWa5bH8uhgPO0xkfMACLeTV+gdENNIJHRCEwqKLg==","shasum":"1a03d90ff1887fa370496b30740415bb15d4bd35","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.3fae6c2d.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6TxCRA9TVsSAnZWagAAofQP/1hWEjFVskhI+2nZDqVC\nGtm8qo92CyAwnjak7OS+B/aMOu7GOAfOJSRkAodPTL6sRIpYKoeHjAhwByIq\nRRuEOrz4zRKeCMZfE1Bds9C3znuf9GgEv6KWd3LBMsGQg1rXgilBVaDvtpof\nv/689//qJBnJlZQbqGCoGP8uQab0/Yfvdfe/IsRrppGv8h/ZBsprAmqKme0x\nFqjP2qlQGz6AtXvrC3KOVnLQYhvgqWne94UujGBNzaLLw7yFMb2ohukFZCxV\nNnvFlmAL//KqCkhumAjZlqYd+kkzbKsD5EGbp6tUNicmWKQB8nXzARycLFlo\nv03f0JtqqaKaAHADGFRwFVAUbP+x6d/M0imM9SIrwwo/IfMsKov5ge4SGS5A\nzxtMC2ZUTXt6DhwBNcKtSANBYwCYVm44c9VE18IenIMg9LeTTyEXCUxz2646\n2Uu0esO7eJe9PVPIlVK7pxf8BM/mmdHA1IqZuqF2QYccqCw4SfZ/rrq0pQ0I\nfUh710mGbygmt0odcmPxXBP1Dx2JWxV9N4hU0R/jQ+uL58cZvpTyu5CeAJxm\nyaarAOyrrDhR4VU2UCZp3qlRsxDorkZS6hJBNTt70y+Hhmkd64nRXcPwtKZs\nlqOID9SrZfrfJZ51APZElCgSBNGX2rEvHsQovKjQQR5PGQAHXtb8CFlz5gup\nd8js\r\n=pK0b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICQttOIxUwZAp2Gs5+MAA20cfCqTCdPLm5qtDCV8Ce3AAiEAuZdlMoR/ksVvS/1BCB3kzOXDXD+jO9wX3iaxABn2eh8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.3fae6c2d.0_1631298801299_0.9151250185486075"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.f1958c4b.0","@material/top-app-bar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-t8bUX0ZKv0kg2W3+74BCxi7K0pEjIidKPiFmyERMwvzdjmYSlZMk3sBaCgwoPjSokmtbnw3FcyyBThraPE/W4Q==","shasum":"4821c3a5c398f921944274ba28d8b6e8328969bf","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.f1958c4b.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6SiCRA9TVsSAnZWagAAxWQP/jOJ2EVeZLpQAfwYqy/x\nfmgh82nsNVD6DISGYiLfCFwhtps8tvCuxS7CcNx3B4UaOF40oekNItKB6C0o\n9ZbX0P7UtVJs5Q0c7G9Jayiyu9rolOfHaNok0ClQ6A8dday6YLElkeBD4Vzb\nzHIZLp4bmF5v5uq1o2e7V0Dnfk9YXW7Rhlm6t3tZuJx4zB8A1dyv14Th/GVo\nkDlHJC4p/CIJDkTMZL1plNrpPWjxeNohyN7Fu8JgnOvwh4UpljFGAwSWr+po\nhtDeGU54vhBAMN5OZ46508zvx+0+Z1vpQvIR6bz4fvNTjQByyQ3ZU9dm8+ew\nOFhocB97eC9KGM+fsIQpCEH8mFoHrOpOthn3CBsqhPAql2PWzaHsEOdqfNIa\nq0gBM8T7DwHlv8w2z7pxJZvulLHzI37C9Y99AnJqXtM+OXF9xMRjs5mPiHWL\nAZ0MltIExzDy4Ue47T6WyPwhB0AH9QiFUVhVuhJ9QT/uaY0VuxYWnXu8QyHs\nKNi4g343ZyC5LOzMK8+27B+YcJ38ofy6Ahtbe7LhVCdQ/Rx5sOUW5i9JLNFp\n0/3029DOJ1x19AStHEmcWCvjDcFZOdg7/zZ3cgkdGgmqbgIP7ZoamqDU7hUH\nbSL9JobW4hqMI2EBuQC0Ve/QYQsIGDrpnwSfblvpcIYjgiUGRA2q2ar307D0\nwFpS\r\n=bRl4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDx7OvLZfdoTttixVFMnWn5mNIx5Lnr6ZSnyQRODYx1jwIhAIAAhPH0Z2SzantG+m1CO32vKlVZEINpQhQta9mp4e6a"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.f1958c4b.0_1631560866455_0.5765474617490458"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.23.0-canary.78abbd59.0","@material/top-app-bar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YXl8nxGZQZ66Z/essdUf4WbH8phq5uKPadhBYzNacmKgb9vGxOGR4bG0x3pRUiyl5OgA3d4h1q0lCS8pamqrfw==","shasum":"7332d396215e14d846de9c3be0c5d443ec323bd5","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0-canary.78abbd59.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8IVCRA9TVsSAnZWagAATP0P/R1Z1GFv5SKJf7q644M7\nUdb9udfQHDT2QTWywEg0/+p01shj9GPWDxkco+cCfjskshzhbKp3fy7x7Klq\nsyRGZEJaMvEXZRxw0KVVsbq1gcICGiB9ua5KVcDxzoxJW59hncy8FlBWssx4\n6/uXVMJ4HoJYqz7WhjdfwzIyV+bRTk6njg6jvMQ9CJv05nzIXTN4vqvmIbwk\nKSGKKWY2hrrgIK+Zufc9boOhRWZpTKiYJrTUGFqix1x7G6u/ih9UbT5JKp+8\nWsZUqLNz3RaGChRbFX/GzD7hq+KgQzjof/eF5J9K/vDz7oj2Mz/f242z94Zw\n7famHF6CJMFTOE+trVOWeQLr6so+V3Zd6tJQoR2XDnMjeczza8sJkuvFDpTY\nu8ui0SMM/qxOyzejFGU5ianLGlvfsl2IUhDtH59W8PT86YyvvAw4Qe4Fqv6M\n3UjZJ1a6hoEwHk+66W9jUpK8Gx5q0bCyM0KqNqsuCXuM/GQIjchzOoqVPZ5h\nWL6yfBf/McjTcib7u9Fk0F3jwq30JEKj0BjbZ/13FwScUYd2L+I12+v3HniG\nGrJsNfnl8MGFX2rGo4c2cs7c660BWtjhkXzpYMJcWD/U9e+7bpqTjc+ly4nF\n0FrgyeqLx9p2cjmuVvpE8vusUeYgOwTumLxj0L2TbwoObP1XlLK8EvqbLbqp\n/N3a\r\n=uZ/9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGxI/c2Kv7KRrjrXZWARG0r25VWEIry971BSnKmZOxFnAiEA+Yg86AfUqMqhNjRdofndkK3eq5Xit6SsqYgSSuHYq3U="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.23.0-canary.78abbd59.0_1631568404928_0.49893631812775174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"^0.23.0","@material/top-app-bar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"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-fixed@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-+RPZHUWB9VmuvZ9eoKLfTODtwpgB9apc+H00EyViuSPY4FXecBBpnFSn2SyxcmE7dtLYwvl+q7kF+s2WDJxf1g==","shasum":"316453c1b283f99d0c0d6945fcf53e1a33230484","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.23.0.tgz","fileCount":9,"unpackedSize":25326,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8Q5CRA9TVsSAnZWagAAWtAP/1eEoAYGjAyRVNJ2gOyS\nDOriQsk2EVfJP0hplpGiMJPaL54s4SVQZr0aMXuvYJJH0u+oIZ/oC5HWZ2by\n6+3wAJ2GDR2aCEp9eDcZeyMu8x9sV0Vmtd608R3pQT9kOCS4WVSYcMZZpUhL\nKn3fb5HijiijqfiTvAVCx1fv1oOXq32AppaScmaxrvNcl2JFwpzpF77PdoF+\nyB6CSiFZLSAPnyYuN2mWfT74FeQZ2+NrZZJAPaIMWMUufAOr3ncvGj7Yvr4S\nSP9br0ed92gAYLOjIZVtVQW2RlnJlF8CUVsWkd9MsNllRykOZtWmFYLOb2Pz\nmLtSB94hMudD+IcnemL1OnXDV5H4H/q8TM+x/nIJA8LPZUhKhYVP2C4RgCRd\n5TFxxV+lmWHsvET2tv/sk0LvV1yGVTg/zMjGngVT6QlLp49WCNJDy6DM+CTT\nfy4VN2HENhoriwTJkbeRP5VDRhmPKuZlKL5466T0ntlrf+/36Irjs+Tf+DEs\n1txM/o4abJP4F4XgRkeu28XgXgpB1Tj68QDWFKz/z2/p0h/Jpuij8lQhVYeb\nAt+Q4ZFNJae7nOicLneZ9TNuYs7xEq7Vf2I4c+rADFu1NBQ9ocWhqP1Ml/I3\nC3wNcBRx/KbEpPOPAIGLVerCSz0IvNNxywSSpTX3ufnKTmRODqmouRYtFu4I\nPzZ+\r\n=poIs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqo9B/+dYFnLs84KyewqfwIbOaDHTh2d3ghnxf0IcWqwIhAJ5IYs/tErBATPeqh0RVsdCOkQh02zwUFjClkHJ9uR9x"}]},"_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-fixed_0.23.0_1631568953561_0.35335484222692926"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.24.0-canary.9830d665.0","@material/top-app-bar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZapHrND3HpafhF37EJqee5bcLqviVLIt6fHr3hAsTYqozwl5aCiNFqnmHGMoSoMbAfYRQOBc9dsr01uIQ0MISw==","shasum":"9fd1c19c71005ee24b9b90a8dd7a7e192df150cf","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.24.0-canary.9830d665.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8SaCRA9TVsSAnZWagAA4DcP/ArQ5wEVPFAvkLXK6J39\nC2187MxFoiB7dfGBM1pRBjygXrcHd0DmMLva95nq6JygAPBdXPR1g1LPbj45\nOzOwDGHLioYp8Prej2sq+muFEaLKQBjUF4xPO6NoG8p00bFPr1o8P76GwDLi\nZJJoxXvvzaOMv6ZyZJ0cq5kF2DB315NInkouWh7rkHMmofxR4EATp7pmNdX+\nQLpxlVxTUO8DEfhRy0njfUrRcTUTo/I6ehKUDUfU9r82tK5TbV0YToWhStRO\nvNaa7W9zDpxT5yNnk7S/wqdYBLTaqhrCOrRXtrbhLg40nEqEtf+fV7FZLOTS\nzdvHNatSCn7mlsoMDVxl1xJ/IUm/j07+Fg62RnA7SyFvr/xxYJPXX5BX6oGF\nyUNisUCI0qKRvIsPl6UIKB2lzloqa2PTJEdOPlLWVWeG5JSmZUCmjoyZgM8s\n2ixu2Fv0iZMRliXGGnr/P8lzZ3+/YHLsPxMhESQrgUt9R1nJI0Sx4BhXCiO5\nxPBGQgyU3csn3dNh74YwAYBn5HOe1bbgPLubpdNA0k9az5a7mOHJuG9n8fkp\nzWkKfxx9kpH1Cini9WA0ltyNwHva/6SOZ5lVSHSThi6wrl5NAKgm5qLmrs97\nTXCmP1U3/cIGOICbXkE2Ey9KPy6mVEhYU4K+gmF3t2Dcf4+Ue99Kd5JQUoYD\nJBX+\r\n=iEMU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCn6jpPs5L1j7hnanlIJAzngZAyeuJE6pOvy/Q9b8PR/gIgBFsMP+vCl3JwP/cwss5s00HtJOfsR5sXTelrrspu5NQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.24.0-canary.9830d665.0_1631569050264_0.7415561306508036"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.24.0-canary.20e2081c.0","@material/top-app-bar":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MerT4OXma79Eqv1m49OWL4zMsqPY7LDkOVFEyqEnOB7sHstH9FHfKPz/bHTyc7ywB9lMwZ1trs7SYHN6VjiXGQ==","shasum":"3e99efc95baa1bc364fa5fb6e3533a5ca45bea90","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.24.0-canary.20e2081c.0.tgz","fileCount":9,"unpackedSize":25365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9+SCRA9TVsSAnZWagAASE8P/34mlwkvvu3bFtOdRxaZ\nDOgEyh5ZzE3PiRth5hhmo4fBt5w2UJPN9BNUWH1pyLrn/A4FWdyh1ns9QpbB\n+0ekCwYE/RO3/pf+rrwIFAYB3MDa7QSXkqYZGltDQ/+lA48ZSsqWaR2cy2Ft\ngxvPaivKNmkA3bdcBMSHpP7G5IwvXKmclLp9hHR+W0WZhK+MgwTeYVNTv8Bf\nIiXtKkURj5ffRL/sVlH9i5gFPA9yuFKq7uTHX9qU1MgF40Nxb+E331mMv9wv\nEa4Z8xKxxgIoE6lvHc1T1NuUK7bX1Rd02n9ISJHrPADyDl06igEaKXC6fFmy\n0koX5JaklPAj4qHPcAgLb5fvCMvYiF3h2P3AimU8qseYvxGSm5uK2pSFjVbo\n+zP+YTsKs5GaV7TuxmeawM5/sfzBaQHr6pmqJdV8rmAq4dL86BwjlPz5EC4h\nqh9KSP/rk2d18qW22snPVub6cWgLnefsoebj4FcXAH3D2N0ybBvS7D76UrJV\nFifewY9zQ96KtVp81jhseGrSX84OAnp2hUkm+4b3LxxUn1h6coOqNc7ud51z\nvFM88poV0Dm+vHxIjQ2nJoM9pFQJ1Tg8O0dvSDE9HpNIG+z8P7rQUaBOr/UQ\nzjUuomOmTn5rCqRCpqVVoqvHCzQdEjt4cXIzT631HKN6OtBmcIaGsVykoedb\nnzWO\r\n=ABjS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqx9ofZdM+gNsNDUDOFi1UVXvtHwwkuSGJ2IBGQdNWSgIgXOFYbZZlad4O34GPLSAh/zzwaDs/owMs9xRmvTv62Dw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.24.0-canary.20e2081c.0_1631575954709_0.8642313752631556"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.24.0-canary.583613a9.0","@material/top-app-bar":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zHGKmtV3uNv0/IqUC/ad6oPq9cZzCuzlzo7DKqD9mu3NZMIcIrMPP96hlM/IyD0sQghzv2EC+/irVeoABAx0Zg==","shasum":"37466ee40b719fff05fc9f2ff1310731f84734fd","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.24.0-canary.583613a9.0.tgz","fileCount":9,"unpackedSize":25365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNQMCRA9TVsSAnZWagAADOUP/2mmgkNBBAoowXTveWqD\ntmgOCmZSfhAsKXFYEpHfvI8CjtsmY+hb7XtXqkOktSylHXu/WFsKmzIwPxLc\n6VQzgy6v1dqIt14aS8tR+6nbH4oic5uyNz7K+IjDYDUQgrdVxtme5xsU91Al\n3y0j24aQG4AdLxrFsMDon02B0BTseNemGSadY5vr2DlZYtQJi4YdXaqH/Z6o\neHhPIWOx+IoKWlVK/B85fGLHU3YpOBW8kmCwp3ysjr30AA4Onnl8a11BBrdX\nI3udpf2dr63cBSOLIi4GizMyvaHt4/38Xhp8yjDmCnD16KdJfP9ttCIqNfK1\neOqhHTgZXGrQrZq4y50oaQZD5oOXz3wznWfHtLV6sNBZse0K+DpmlRwtIYDL\n2JWU9vRORtgc3EOtHt9sijYyy3A7TM8bIo/vA74QtrQoSTwMYA+kcjh/Oosc\n/vQrFh2nxokEy7URwJWOZuDw6hrrDtZ4uq/vtXvpRvqNS4xHX7NYWcaxpF7e\nice1QhEu956xNDJEQSqOEH+NhJTsVVifCVPQi7P2loUqy1jYx9mhF466ltv8\nHWQfth1Vk2wSyXIQIZ6rt6WatpcJ/Dt1OA9UBGqxDA2lARK15tvTWkxdLzNJ\nn21OFaC2CwI7kolncde/EtC0nOpz3r+5sspWF8xH2hcVVvP+0Ma81rwant6B\nOKs4\r\n=/Itx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcNY8rI+kyfySVoBhGhfh//6pUOetc0U1VQDLEbK0o/QIhAOwAyyKSTrxqk6mN3p18osEzMahAbcgq4VjDSGWPWHVP"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.24.0-canary.583613a9.0_1631638540173_0.7340270588842175"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.24.0-canary.0e1bd56f.0","@material/top-app-bar":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+tkzq5dDpPP7XfnY9Kr99MAMlfGi3n7F2FyjMeXSw7bhUZH6S4uhgGuh1SSLKVLMt2LlCwT95mLR+fQjBnfjrw==","shasum":"d0972126b58f3d014230e4265f13d5bb57f21889","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.24.0-canary.0e1bd56f.0.tgz","fileCount":9,"unpackedSize":25365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNy6CRA9TVsSAnZWagAAVOAP/RN/jcKiQogtNZQ6Sj0Z\nFAq0IGfCaVnKxbeJXL+wks4K+c21u4m356/+XA8LfU5qgFaXW0VTc9fsceL5\naW3L33A9zfB4lY6X9/ZUXGOeiBwqQ5QlG1Yq6JpNkV8uVWTHzW4kd+SJxZNU\nduiV/wRYD/2X/RzfK5F5z2Q2cZhRAJEi5sCp11HkuTv+NR28Cm5XcZDRNQZ8\nmyqMb5YrxegF9pwlGhj0zzJU+Xo8BaIvngW8mMTUnkVzn/5EnoJsA3wOrzW5\nk14sKXkY/+w9Zf+85XgmwcAgvnSCvDt4jJlM88+WnMesqywAjQEstlF0o4uA\nXurAbr1vik5bYgCn6t1XWewG/vLMB/rd+dmE8yLMosiJ7cLCridY/LCmSJED\nvOMptyBKrlENPH/WCn6qTuzmxi4TgoolyWxy5S285FEcPDxCFr+HkAcO1INQ\n4HivvVlyv2BvDIbC/BfCWKAsSNI203buLABafvg6hxbGb1bMzTgQd1FLxQc5\nduncKREd5F3sOFWLWKA7+ER5ijZx+xqwhHfjz4VoFTfKq7cbHGkCGmTuZV8p\n9ZlyGNTHbK6QBMhiZOV565eedBI1x06oajnae3NqmaWBZgNii1RkcbAAq/+o\nCKg9tFQDOLgGd9VS0D63nKBfsMC+sC7/jRuWoBYNAFoXBY9QbPqyS/0I3CJF\nNcPc\r\n=fxRk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbS2dItAPtq1XLIgaI0WDDWwGHhqNB3vj25WhZEY5HZgIhAMoVtxgv7D3fKW5EfYoz+96yOWhslMdjC5KSxsXA29QD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.24.0-canary.0e1bd56f.0_1631640762118_0.5760408892972118"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.24.0-canary.7bb1818e.0","@material/top-app-bar":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6LA7ryLGCvp3VYgKS53joj+yid8c41xwNGTcL5MrWoDtfU9IKP2j5F7WhqZlxpCEAR2h5zCGO8CMAMzA1eUWnQ==","shasum":"e01d344a353d2bdefdbff4ee803d57faa7605df1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.24.0-canary.7bb1818e.0.tgz","fileCount":9,"unpackedSize":25365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQUAACRA9TVsSAnZWagAA6LAP/RRcUyInZFUDVkbYLL9M\n+MteN475luJMjH0dCEpC2n0VMH2OHONO87qh5VnyRbAca6jU8ml7hNdI0gL6\n9ClFZAq9AvMUSHMtPmERVvciOaCZbnArn+Hd8d2ymQr9KDNYqoczvf+IZUU6\nD8PR70+Hw9zerTO1D9GvdKMOR2BAmx25VtpESyrrzZEc3zADPJpCqZI5Q4t/\nl87b5KtLUvUa4AreBzaw5hw7hjot7kBYhQf5nZry/ybBzuHzdnOpkM+2p455\n6ctsJVcUlij1TPjHv8a5NY1Ct5sJQ7U6pSGNWf+HobvrnlBVnzO6hRkSKt12\nM6RcDRGGI+8lD7P1B02FofzN5LacLVSg8K7yNmRIIJx8p0jTvNzzS5Gp1O7D\nNfiPhzjW4rPOz/wjXpqQph0Vv9iIhX8/aYl7klSJvvDJaH9MsjwOu9ZOosgp\nNUW/CgNn9s29WA9DM3fKrBjnr7ZOumDE7gsK0F1za4RzS8RkQ2Gb8puqyths\nX/Pd+YjYOIcSClBNcCUn2dXE3pLB4jeqejiQvNkDwQxgtQqJopVyydfwbCfF\n7MOhsmzvPn+RQybelfdPpTnCjX7nGp7uwLb3mULEixUJyAWkqKBSwZXE05eh\nf9h91m06icpY4l4jRzCYQ9HvZVNuSlvEiOhsbgz9qPbxH8ReNiD4P+GuhLB9\n0XFZ\r\n=LLkF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCravwJW4298kFOeECo/UwKMVzBKSQMnMu2W2zdOUry/gIhAJLWMndhKrtvNhYuRW2rUUKm2sHuTRs1JPP4jZ8rw51T"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.24.0-canary.7bb1818e.0_1631666176063_0.9454564887895922"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.24.0-canary.b5e665a9.0","@material/top-app-bar":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-KyXkw7pUo9d4yD6ZsRWOIOK3bs7VG5XmhL16VcaU3QAR9Qy9/1qT7I06+dxhToyUtbVoOk7gV02gnudJs4L8zQ==","shasum":"277ce1d3319c3738de2f74be77064352dab38278","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.24.0-canary.b5e665a9.0.tgz","fileCount":9,"unpackedSize":25365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjfPCRA9TVsSAnZWagAANJUP/0wq9bmQceTnyM6QjZw7\n/WRAkWHyA/9B7/XCDWTwJO77B0r23tUhsvryk4cZEe5cjmb1fe8LGnXov+dw\nOehUmYGjSyoqZxj2LWczC4PEroREvsbjOiyXq4vUAGqkqY0KhjLmhtdCj5Em\nHQ1WpqvPwJofAAySgyWeyUhicMfjT0WpC35PDs8/A/Qwx05N5VW9623GsRST\nHmnyxi9PPnQ9ZkMbijubIkElZrDFR5XlxI1fMRyKNHqU/ReVoPW5Bc2EeLlP\nnJt8tJlOFnw8YmyEPWMbgBQXELWD3ApBdaltR2tUr3c5w6uVdovEPlXY0XB0\nbmIclaAixApBz/CF6L8PYrLfZxR8jdnwqhCdOWBmvtE9WLAuQTOaOwXPzT3T\ncbkzsr/VI6OT8afEyt+hcloHv3Z1gMxMnihKu9wgGxXHzkG66CDchfNAA2+g\n8bk9zwlqMHJHL2il/DygktPqNjplz0hZyt0xHUMXrJMNuMFkJhytnnWHV4f2\nOJsTiuVeaBsKpBZgOo0MFHOdoB/6E/699Oxk99aV/gD8PjuHWQkZzgOAO7T/\nJB04Pk8BmjyipQv+HF5IXw92THkIazvx/111+h6fHCH+ZQAfHnRCB+JuCj4j\nBTF7izwLkoTJCQhwgaZya07waacEJVHvPa1yLmzBVh8UsRbzX1SKxtyxQc/+\n2f0G\r\n=gDEP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDTFoKiPqCAjdEAuxiXbCwFCeVNa3pxzwei9eGgBjAB0AiEA9Mn3aa+z2BxDdkOG6Vh+dTgpH2iIBDcfFnlaDEfApcs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.24.0-canary.b5e665a9.0_1631729615661_0.4454344636054772"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.24.0-canary.ab1e177c.0","@material/top-app-bar":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DABTLePQT9W5q9f1clbEAnU+NUY4IzRzxZOgapwSfkOkUOc6c4M52yG4GibmNG8tD185FTscvzM9pisHolDs6g==","shasum":"9dc388e8e061b2d100a7e2ace7841395b8f71e36","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.24.0-canary.ab1e177c.0.tgz","fileCount":9,"unpackedSize":25365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj86CRA9TVsSAnZWagAATyUP/RVCw8fW+PIjeoGjeMXn\n0eADqHUvH+Gy3HWvH1QgvrElAT7vlQwLEpOdhGKqJr1tdxXKt5CtTfhNcADQ\nasDr1C2b0vDrUoSq2hbjV+hiJAs2CGy2xXg9OPrU7jK4/U5QEccTcAhtLKzi\nnL9E/daHAOqoJjbhF5SgheYUHaCo8uJnOe6wGcuc7xZV70USnve/PaySUR5N\nSqp4LqAe3IeV29OxuiONrnNxkB4NMW/DYH7Emd1ipNWcHlxoHuM0iV/OyDaR\nx/rYRePFCPTtu2QvRQWVJQDzyzEec6XmK2a/QYPZLdazKKpDVjUaWa8vn1M8\n86jUJwj7SoOUhqZstAACVgrzNe3YWXhFAP/bK3UxzYeCmxP+G4748OqOF2fE\nxlPBbWUePYf/7gdlwilMTzl2yMuXp4Do0sXAkt8EmnhmWf2jxNLEZibEy+5v\nzswKUcruBQE+0yvPh2eEBP+kTbi1taCbg+QCJVkvkmktjhd+0bKcDbXqukal\naBg/qs7sV/rbEsweMADXEjMaX89dTy9LaYCG2ZEIT9QiKfDJe5rql6O5EIAR\nO7CTkP74SNzb04SBuLxRyyjrwT5bSoEiUPS90jjZ85Bt9VheFW0u6v8w3adv\npXdX63H0CjPZG4avce9pTWi6hGIwo90ILIfFQAUXeRfK+xr6XOTL/HW5Fa1E\nWN8U\r\n=eggx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvqMIyd+ELEnY7q3kZeEjQqJ8H1g9Hfof6I7ddHPEsagIgZtQripAm3wu3C1R0z5Q9mlxz8DXWLH4aLrX0keDidXc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.24.0-canary.ab1e177c.0_1631731514374_0.9879195419678333"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.24.0-canary.8dff8894.0","@material/top-app-bar":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dgW5tpOFv9yma58t2wOb/TMw1/ug6Ln2ZWF6BWJH+vlt/l2Wk16Xej1U+xeVF4AkcPN/xhozBbG0tIGL2+1M3w==","shasum":"20af0e3d3a96c0ead0e7625c378ba1e208a77ae3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.24.0-canary.8dff8894.0.tgz","fileCount":9,"unpackedSize":25365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkTKCRA9TVsSAnZWagAAwlIP/jt52iwReBm/GxloXd43\nCBiOgP428AHcFg+2GR6FiGcfqOZWHgB3gNG7+X7NMUkse9bs2ptkDeir16rj\nMGT9ArodQZUZrBRc/uHztT03KEvImUPec6omCmIiUrtuqkibDhMkb/5bLT9Q\niAvwjEIg4j9/ueGBo57mfxKO8PxNOFPwjTLMzAMacpb4JtYj6wTzOPhPXAmm\nLlICvLK+3auSPVo7q6P4Up5azDn7qth7cXepgWmsxik81ASdZpEXZNVNylSl\nXC+X3mBanPoz1F4e/pQ3TVfEvEERfyANW+IwDECR1JZtIXQW9kYvSNiLGYFB\njkHIvrcdNFyF/fIQgXI9i6MV8fKJ4irpY8m3DsIgoVDvEliq2ICjswtjONXf\nZvoxzlr+DCzid9p1jyosRKlIkYMZwEQ9eUYKfv6gziEJAZKqQZY/dBWXhUbJ\nZwcq3z0UUqBA3Wz2Gt3vjzi9qy/a1VEFTu8tcDirS1UHSwlta9dNLhOHkshx\nzYvIFPr/debRMth3TCs8DIgDBI3+MEmfJ8bduPpMf5moxpproXwrnpwoKsiV\nmK5EYij3sa2vHWs1ShNxd45ed13APPNOBmMTu68q/36GZOi5mgeCzx8tJzQ/\nYO3vcLWV/o5XpkqhO9/C6ZwTR5EAGLNYRbNnZ3Ad6Ok1u4zGTHleBZ0Wn4mQ\nfoWh\r\n=Zuq5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqVi/pAJBEX2kN13OGhfCaOBpWrlOBAg4oQivWS7983AIgfLDKN6kk71iYdWzk7vFh68WjAgL9LYeMQJL7gE4S1Q0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.24.0-canary.8dff8894.0_1631732937897_0.6946825043079308"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.24.0-canary.9cd7e927.0","@material/top-app-bar":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-bsMuZZE0OT5041/LIHLUAtcdiFnvRAzHvUViPBBlHk+17UpdIChM+OYO2xJ3lR3qXQkBMya2yOCSESkRTpKRbg==","shasum":"7439e092e348bd54fda4d6443c9c2569c45e372f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.24.0-canary.9cd7e927.0.tgz","fileCount":9,"unpackedSize":25365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlhnCRA9TVsSAnZWagAACBEP/AiiTLWbE7q1bLDkXpfi\nRKxMg8392tO/gjtkfLkdhqU32FD1jvDJiOQplRBI6FR2lGbcXS1w/B5JFJdn\nIamvJ+mUAp62ErI2Xqa1XjHSWyvwICDTHk12s0IdAif0+c/H3q/B/VqAedYX\njqPPtx+N876L7AgSOHKk1vmKqm/OwSAIsGTzSFzw4lnrkCYcT8Qikvl3X2xu\nxd6owKlxLcg+wODk9FBjuov8P2Raqzd5fdfGGnw2bfjMPdiIW56egXSWUtbU\nxaZcxpbJBZ/vWF3HHn7eMm55dooX3mvGFBKd6sKp8HFrNyNsOtCYhBbj42D9\niO9lOSM5sGYDSFP8AKwfmpMbHI7IJHogZuC1siEE086DTdNNKkKWkMJMlsSA\n8Co1oPijveLHJGP5kYVoUWxewxbhiQFcbx9+bRHqL6A+aeRinM+lypcR78Hm\nD6B1SsWkJQ1qvkfEFhNM0dajZRiuzl+XtnCXGyd5VUcVFds57VIUsEyimbty\nd83BMWwR1XlYq6+JZxDRSyqLifivqT4S3jE9gHHv/Zfc/lDezZNcQdIkERLC\n4ycxKe3CrB5M10xDNw3dIMA4gTtdLmmIuzb7S0yskgwLCWMy45KgEgtJYJh2\nKGBYR6Ae1ONHR2R4iZfFmtJ1EPdLnHamW0cH9J3UJAZtRJg5cZkauij8aMoy\ng1Mb\r\n=gRkc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDrHV3vPqLtmpzRpN9SRbDaOst95WT7L7yMtb4bRlu/cwIgGYlDVscgyt8InIpQjxQ7GnSS/qvSH1rLdQ9P2MKsWic="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.24.0-canary.9cd7e927.0_1631737959024_0.548377793405169"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.24.0-canary.a7132082.0","@material/top-app-bar":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GJHj3L9CV2LVU7bSXqqeBhfC3ZjXUm2Q3W52N06dEMJYYC2j149Q20AkTJQ2oD0nSy+R5ZTRV3YenwdZLQNP2Q==","shasum":"f0a5c9252fda419b97a6b2942166634070463603","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.24.0-canary.a7132082.0.tgz","fileCount":9,"unpackedSize":25365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmmiCRA9TVsSAnZWagAAGeIP/0oRChibzZh4Ai1rJX3O\nYKGTasrRvnlCXtXzSd6FyAryVUXNEI+L4YIJH5BENj4LjRvMVt8AAZTVcVcN\nYw2+tdOYmLiAqsjmFQll3uETOeJTc8qiSxjUohgorbb0LWTk1hxPkgWG9OHE\ni2KASHL0L6RQz/1sxoaDP7HbnEW3ifYMP1R94GghMfsiBORsH6/LWCTU6pPz\nL2duCkUjVdTHelkWvRqixU5I2tCiJv2NUDRhXspA//jRnQTJbqGAnzIl9w1S\n1fssa4L3oUB7OHL/rbY+wNCM7frBAtbCsTCgyy/y5KvDwntv2ueOHqiwmC0d\nKyZXVPwPVQ8pcHE3Vfldl1vFDvhXXmE1DoG/3rvA89IxVjkMvaTtHof2tPnH\nsQ/6rNxOz/4ni06d0sI1LbCPvOadJ7QIhu5zRpXlc7xtAgrGRyWivPcdzlSr\n6UMEtBp19tpyDGB0Rr+g13kzxJN2uU2WPDphjSTLLn7fXZKWUikk8gUqZ1sy\nv/mvPRqbZ8Czr53ILphNIeXCIhMZA4WAoQUlVMcH4tJIY+PDZOlizVGsNuls\n5yPeN1gfuRd6neB8xBaJO+h6hsbmLAA67oOUrswRrA1uzWDg4Tet3igmsKIx\nbVx4IAFpr1RW/0eTwcT5aFf2cqcSb/nnwchKCMk1ENxlQWknS/yCKMwmgu+o\nQy4Z\r\n=QBHp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDj+8FRggrT2AFSXjyPgLGNd7drfZIFAW2J/HOKY9qajAIhAMSWWdJMoyQ6uq7t6eqvC+jZ1oKfRgLTu4OlTp/Z76bu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.24.0-canary.a7132082.0_1631742370759_0.7740386558707026"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.24.0-canary.cd9110cd.0","@material/top-app-bar":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-c2qXUpXiNCDAmQxrN+TlwaHOKSxBIz16eZkYvD5dCXoZ3x3BpexC7QMsKpZkGSpJX6iUH9KzPax7MAjtQkIh2Q==","shasum":"85e8bfcc9cff9cba68be5c26741349fb71c6f704","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.24.0-canary.cd9110cd.0.tgz","fileCount":9,"unpackedSize":25365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4LXCRA9TVsSAnZWagAAk10P/3bzSZ0gk6l8PO7YO/d1\n5rKnw6ZZj3qCzIEs6DJgx+nhWZk/8U5lHVL5aVI7su5iqfuTOOZE+qcA/22M\ntN+xyd0h0cWpGmgur8wsHjqefgauQzdIqgzDZYIPNZDLUNJ4c0QIemDeT6ry\n7kMCMKjnVc6vHHE6P5ZNjHJyQiw8Im5pJLqaazBUBy7LGnzdjj5rFlb2Thix\nlGHGdoGuvyWpJfbf7MEK2HE0LEh2HZtaFzdmXdGztIRhBXkKmNaP7xiF5Lak\nGNxgcrU6Lk7lnzU2TPE57oF/C053D3Oz1LmI8gOjQ3AnsNOvFAh/PAOOxdkX\ns6XZHJT46Ln9wB6br3HGrWqVKgodGUebuTQYvjUMTYfBDvJatQPXXZM5Kc3T\nZQ53OosxdyfLkW0VrE9NkvQgLGrgtSf4awMuqjPaIlA/tilRyGl8oT4Wquwo\niAvD65EC8o7vv0Z/4l8rXL69BXJyXUrwVldneVvCgG/utGFNQyZoAzJ6ISci\n6p1u/xqyeq+Gug70LKZu60zlAHMcZi7mcfnxHiM7mtEj1krwbCGquA3m+vXi\nktGS/bV+ZFiZDMqCF59QBMFe8gdQ9HFjVOkbd73eH/ODKLe+CWgRXY94Yzv6\ny2rrLYBYyb3bEMmVhfWxeErO783kKI9KLyJjlNjQlc8KZTeep3z8xi0/Bxnj\nBfAR\r\n=7d+C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAsElj0arAtfgRYfM62CMPBF/7fLoe6P49CacbznjjKHAiEA1nlknLzUto59hm+4hn54fs8/Ry8XnsPtvW7U8KJ+WPY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.24.0-canary.cd9110cd.0_1631814359182_0.1875249818239777"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.24.0-canary.1e5a9883.0","@material/top-app-bar":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-IfwL/DqD28YqOnN1Q1GCfQyzfpH/FSQV7xMG3N3NcLtnyezAowfCCNiAtNI/uo5QvxUSuHUhGheaTecJuspb4A==","shasum":"d31a82a5a6bee283f5bc88a5d1e46cfc7b9303b2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.24.0-canary.1e5a9883.0.tgz","fileCount":9,"unpackedSize":25365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGprMVQCnI+RHNhDZSHiRlGm2mPVyUDYVKS/nQNNl263AiEAkDKsTer8etDIbvz0h+rY1COqC+1U6jJvhLOgtDh4PNY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.24.0-canary.1e5a9883.0_1631911161055_0.06199206048288919"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.24.0-canary.32c830ee.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-QjIydggJ0juel0idlHSAwaCPsCkSHXwzoS4B5THxkyUtEttmQ0Oskyyo5g5KpBo0MKBBwzOzfGEHriGzovUoLg==","shasum":"577c809a60dd36026f5df211fbc85d209991f58a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.24.0-canary.32c830ee.0.tgz","fileCount":9,"unpackedSize":25365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA/d16U2u/tYMoIAL3FGUc2JLj8Yd+fDbU/sJq1pEQmRAiBmwRTCAr82s0Wi1s2WrBWPovkRU9jKF6LN9A95SppXsA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.24.0-canary.32c830ee.0_1631920140191_0.8827692370716862"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.24.0-canary.1de87bb7.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-ZNutkihS7YQZ+MXWXBAjpmxm2uLU4gEZAMj1ga2Noxmc7yFLDydqYkMe5fL+ghMucyhBIRMEIXVsgzEm1NYFXg==","shasum":"a883fbc611ced7b028902b4d1bc251fb9a758384","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.24.0-canary.1de87bb7.0.tgz","fileCount":9,"unpackedSize":25365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1p1BmDrS+a+WLNnpJJ4t9x5R+Q9Kb3g1DuwkcXsmy1QIgfhaQ1oaNVELuW2KQ1Hm3AIJZ34hOYNwGICWi/Gj6MEk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.24.0-canary.1de87bb7.0_1631991143415_0.19478184853296598"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.24.0-canary.f2ea80c4.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-Av3YqwfAAUkY1HmjfTRd8xQh/HNXC2U1QzZitKYB5KTVKF+i33/vz75loVk+rtIUJBwxSxb3eCxdojnn+bN62g==","shasum":"b62fd9c765a5cfc84e55afa8359eead710d3cccc","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.24.0-canary.f2ea80c4.0.tgz","fileCount":9,"unpackedSize":25365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICTbSVfzE4/jNCEFEdCTjqR6mhx3trFPGDFZkOyMns08AiBO/DHViH9Kb+fkIZL4b2BvRCCYH4jx3OuNUxm0Oai6gQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.24.0-canary.f2ea80c4.0_1632160509026_0.9309245240511606"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.24.0-canary.569d739f.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-0OghGXNVdX4hZ5NJ7blrJ+EiKPQ46DyaUvKhLsKCTGwzqF/iaBWCJ2xqNbz1P9FMiesPx9nUTNNu2x1w4FOxmg==","shasum":"f6ad8db06c5fad9878aa4da90c007de0444ec8a7","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.24.0-canary.569d739f.0.tgz","fileCount":9,"unpackedSize":25365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeWBCMUrNFizfyfAn6Tf+ANRLGHIfnGU3Q08PTJToTDgIgKz/NImcLR6ThESahzg7hHlNjgqz6hLWkx1Au11lIzGc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.24.0-canary.569d739f.0_1632173048062_0.14945914119337145"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.24.0-canary.5a434a50.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-/EFaq33mCHDsYuwFVkshsaeWQH1VfKCgXp17P3tiLdB0rLdtYV6Ycsa04voUoFPEf0DkOMgM9VJPZiSXDBZZig==","shasum":"8cf214542bcf6448546258cc74fbb2c03aed7ab2","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.24.0-canary.5a434a50.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOZq8p8rOnYvSwEZuRcN/p6KXpFNp0RSJ2n+jF/DHMJwIhAMVHNFDD4LRfoOYIg5YAvE+BNec7DN/KqzlmHCHEdZQi"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.24.0-canary.5a434a50.0_1632189663721_0.13970247402212133"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.b1c1ab52.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-yMvxUNuQaXCePR7PglFdqLS3/ANKYcaYYBkgX3sX+T0lgFfUfyl9u0NuwH9A/MvhDlohpHNh0zhI1NfiUuieEw==","shasum":"26d84a9a48590eb21dcead8223835303d2af6267","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.b1c1ab52.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAGOJN6pIEYQQ7bD6qYLiZJ51BAPla02JSRk/WUMXvazAiEAuvuwkfr+DRgFxPa1eeehORvN9aBoqilYsv3uhRoK560="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.b1c1ab52.0_1632193944739_0.4751615069574555"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"^0.25.1","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"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-fixed@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-28d1RdHXBc4zDs+zb44upe2/E17ExFR0tBYNeFGC10cboHpMXXiploAmWb/egwIZB8J6obU0wKWFxrHuJr5Q/Q==","shasum":"b7a782d22b5b4a67a0d2b06a1eebae1fad0095e1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.25.1.tgz","fileCount":9,"unpackedSize":25326,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRfpDQ69IIJRKY9DtmGmausCnHtdOF9AY4Vc050YLxvAIgOdwBD5stDXnj3dJprHoxetOXzRUF7lCRomBF+j/oeMs="}]},"_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-fixed_0.25.1_1632193966590_0.875892383345384"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.ae060177.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-5Gi7+V5exFYlvv/Wjy9CiAIYA/P6Uz9IOJ/bgb+hf7e/r7qAe6H569l+f9h6N6rim3fx6F8cymQc/BmpT7BD6g==","shasum":"72ff1aa9405af7fdc002155ee997289394a311a1","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.ae060177.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwkKugsX5rBz8s4vklO4JakOJ+kSjVY5YZygdfU80WuAIgMK8Le5qGZVvZGtj+iva1IEdIJHW1Y+MkpI/E3mOoYj8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.ae060177.0_1632235102750_0.7212328399912245"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.b6fe2a12.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-TBi/PZKealrMD++l2KpQAwYFiqUeOEH3dKEsUj9//JqNkgmTGiLKrjm6Xx8kqWyimcLbtgFegZGMhPm2Idizeg==","shasum":"e5ca2336d4f77777346f1522bc51aba848c1cd4e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.b6fe2a12.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtjIjeGAcANTi2UKqqjdfl6FJVSBGhwsDCi2GhmabxjgIhALVY1ZYv4kOxGLWa+bmFwMJkDDaWDbK0Ls+o7IF5eoLg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.b6fe2a12.0_1632341792305_0.6094822158175652"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.07e91417.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-lObeRPhGagQPlX22P5Dt3FAbuzOZMplMlSTvYaMGRcxW590+cyVp77CSvYouDdl1IsFuS2PLmVJQ9Lo+XWKNqQ==","shasum":"48af5cced75615cfde298707f7ddbb5366d53c5f","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.07e91417.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAtKtMraUyFeRNtHZwoW3wX60yfhqKoki0C82bHS9CbkAiEAiYzbkQrOX8aQ6qOD0ii1hqnyuVgvUUM0hl6triVHXX8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.07e91417.0_1632344762223_0.26787082008863217"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.e2203ffa.0","@material/top-app-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-SOncMbpm7Tmdp2ztykIHwAvr8/f1FSa9gI0cViOWRW9EvM9Oc4ieLoKiVVjwDfRO6EB1/zkicBjaV3eRkil0gw==","shasum":"a7cb6f115b0712cfc5b2cd9f249e4a3d7b5ac6b3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.e2203ffa.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEAJ1jDA6dDzRIuz2tA2GF6+8E/Nuhz9HKB9dLRJRtcBAiARbpa40ZcgfuP5QHqOsdvF0LRJHvx9OQM98JLLUJ4WSQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.e2203ffa.0_1632421672038_0.5198077279138682"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.4abe237e.0","@material/top-app-bar":"=13.0.0-canary.c79aa0cdd.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-mADy0J/4CkPphs8W/KiZT1eoUfwkC8DeWQ7oReX+xHDCP2d7a7m232LA8WdAWMj/49as6mX8V6FoE9AkRhV8HA==","shasum":"fa90ea9c8d691c31f7ffd51fc804303ab2142d26","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.4abe237e.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF+eGp+UhzknK8f3s3ZZXCgfOmxjlQOI5wb8ruJS1GZtAiBSB5iD8KD7r3fMDipFPCKs28vaWzVaekRn1aaOe0M8eQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.4abe237e.0_1632504682666_0.7563476043708233"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.6278ee5d.0","@material/top-app-bar":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-CKGQ0UvFyuquhs8OqeeSAUkAIL4+6wS+xmhZa4otRatQi2Ip2X/CwWFcaw1pZv3S4J5r7Plz5MopMgaM1k8wEQ==","shasum":"ef7537bc71875e84055e6f5df9fac469071a87e3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.6278ee5d.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDPxdpG6dMS+LzRisDdpoRTAUUT1Et5m03xaJ5eFBBcKgIgDVUnM0TQp/cXjQE568k1xjd+MZZcLdBiScyckCuYYMw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.6278ee5d.0_1632767496296_0.1880778209765539"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.3a5d5f34.0","@material/top-app-bar":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-JvnsZGNTDDnG3xTTRKY8Wl3YuShE3JSsSkIgnJRAaamebCddCYbqaSL+G/O/YL7LJRb10XMCrXn+pBrgWaR7yA==","shasum":"31ac50e896b02e222c213fca47ad46557d8db6b0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.3a5d5f34.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICcVSa9Rt74VDxB8Kjb4J1B1wc4lpdJfnlzolAhHk1erAiByFzlVreA0tWeYV+uwfDXbe3bC8YjscnVi1jQXWgenEQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.3a5d5f34.0_1632782505112_0.8082941710862579"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.143ed3c8.0","@material/top-app-bar":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-DY7X3IYtOVWl4LimRLak6zIA6S2YsDtU2IWpUGC2+UzIfCVxTpSRjxmDw6dDmb7lPY0+wyrZSAyEy/qdSHmpLQ==","shasum":"80d0d87b767b362b7de8518be24952fd34132744","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.143ed3c8.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHVfEjoWzJqR2VYOzpIUjsPQL/tpbee/7GSBA9UQ3Y9gAiEA5mAru9kPMwFedujOPim7y2ICNnQuX3suSyIgbNsOmE4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.143ed3c8.0_1632880264729_0.565750174353987"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.e5923d68.0","@material/top-app-bar":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-ZzDrDEs4K4Uh7+3bHTKG5ccz41n8NzNDh/JGWITB3tpkDpWUp9mFdE7kVvWbyb2qcvUJvvBsHMArac0GjJXoUQ==","shasum":"f357b89e8f10cbfc4c1cf0493d79da9968710b6e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.e5923d68.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH2mF3VmoyY0UwtpbhKdU4Xkr/UXQbvJdo+5Nb8tBOVjAiEAoOuGbQQPPkHSkG3AnXby/1jVSfAowr1fUCrQpu3g6Hg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.e5923d68.0_1632960364507_0.38052159286734466"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.d8ed5109.0","@material/top-app-bar":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-4/Cz7Uv9GkBnnCziw8RzsYipb2WSr2ZIP1xdk4oD1jUx3Q8gV9xtpLFcP2TWDgzqI0EwTu85y8owu65axssDiA==","shasum":"8eedaaaa8f1ad49c1fd15316d475582c7807f9c0","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.d8ed5109.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCeYRMZWLROSdgqPv9TxyDd2kQFWFbeE1TvlducZ0lYNwIhAIWrh7EgaNjmM+hGyCiPxvV6Rj+rRsJo4D1M+wrCY073"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.d8ed5109.0_1633044847723_0.31569698858958484"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.0efb9c2c.0","@material/top-app-bar":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-8eiwY1o6nLc4UxcnaCHSNNzdRo9HmG90P65IzyeqprovvmHS7Z4yQQF7jLWVft6pEF+R6aygiIIg0uZj4GFzHQ==","shasum":"81464a76fd0249a53e7bc7a4b0084bf9320d126d","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.0efb9c2c.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEiVHGDYkzWSZNm7tobCVk9hWHj3M8D2vxb3gyMuAfjvAiB3za3Jy0Tvqwzlk8IjeGVah2WuuDtIzt1r9CUJoy443g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.0efb9c2c.0_1633140510511_0.21296544727553868"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.1c9adcb3.0","@material/top-app-bar":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-KL/ZXHgdMlDAGhrXzPoF0/NiifUdO1BVXyaZq3/iC8RylCmVi2Kf2UXVHQxnJ61P5YOdh0CTxA/VrZhrshUGoQ==","shasum":"8c360ab1b99f169c0fba6989428c43db8ee1edad","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.1c9adcb3.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDTu/bGwaYfiNkne6kum3L421CBpVZHIW/VX7RXRWLOpwIhAIgYqYlz+Bj11EiNDfaYd3UIdjRwwRgLswZg9RnVaKjw"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.1c9adcb3.0_1633368828009_0.5762384069751225"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.dfc00d60.0","@material/top-app-bar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-K8DVzn0THquasJs4vL4+1JHImVzarjfer3abrMdkjbpLVReWaLajzUHvYhATM4wnGeZhFrbTRdBcPd8bQTvEkA==","shasum":"afdad1d7d7198acd1743ee4b84d066f11d655316","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.dfc00d60.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEqeZCqUuBowZ7OrmtwytX8FrHv3l44PC6atrAv5lKogIgY1nnBixZ0f7du6p5ap+WGRU8GSRt2JIKRB20zP0jw74="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.dfc00d60.0_1633741048208_0.46104034580495346"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.c3aa844c.0","@material/top-app-bar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-Zf4fV/as2uQVvKbR4iKEDpaZwmWdS4hd9lLjRvce411evGk5Mbc6suCEesSHiKbZEcrCfFEoryxUUmqG9aBm7A==","shasum":"02102841491c782c254126a0a73e95536b534401","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.c3aa844c.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDWU5aMEjpAPZ996jzyYKby/gbKdPtLbCk2tKHwt3hJAIhAIXxdy1cD+GwWmFgEWveXaKxwywtPf/Yio/AxIYiv6Gh"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.c3aa844c.0_1633994074694_0.25931541544760117"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"^0.25.2","@material/top-app-bar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"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-fixed@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-AFk+bfbCtYZFbyPmUuyqeaDaqIfU62buWZDxxoAFUnk7w1TsOtMFnrXwI8XrQ51grA6LP4bz++R040U+QY3jBQ==","shasum":"1fce165dbf9efe0c6c9ea9c7ac6c7bf2fa48abcf","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.25.2.tgz","fileCount":9,"unpackedSize":25326,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC97sLh5BuZ5f4McdJHcPSRPfdNHF0+5FArWN+u6n7qzAiAXU/jfgJeyvcG0Hi9LQ8/6R3HsA1/y7kiKXhF8zLw/Bg=="}]},"_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-fixed_0.25.2_1633994313345_0.7855164315076297"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.406d6fe1.0","@material/top-app-bar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-yiv6E2hzplW/vSamGOzT0hOdRKgOmG0WwzwE4n6Qr/EWbAgWvn7xyse+Ns/SdKok867+zsxx3t2EGnMkpe5MvA==","shasum":"b897f71676a3ce46ad252f6a03afc8897c89aa0b","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.406d6fe1.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAYeedoQWFyfpuXTTj8tvq3jbiGW1pMLSmfZWiMrDnFQIhANPe2gOsh9K3e8Q8LFbw6YFHKAkuRN1VM+RG+e4EWf4Y"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.406d6fe1.0_1634158782923_0.15964548751654806"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.ca0a674f.0","@material/top-app-bar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-CdbxkcqrWxtnNaIz0/fEa0zSG1yuy/aLAvSd/kgrspsxfVcZvA9+wBtdSzTwbO6/3SmdQ34xlx2f8zR9go4n4Q==","shasum":"c5093f7050d81fab6a2c772c3c49055bc14a8717","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.ca0a674f.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEwihHluFbDc+MyJ7j0dFs9zCUpYR4YvWWuelUgYGAh4AiEAiJdeKt7/mAZAkktzIUCrfFUYUpchvUR9YNQekKNA890="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.ca0a674f.0_1634593033189_0.6972949239999902"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.eefcf660.0","@material/top-app-bar":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-mKYsY2rdzAOGHj3PStVQ/TdhppZRRcq35E79Bo+pjNFJsaWJwHlFl9qU4VmjXhXhUvbUbw06XZKOavCI6J/FJQ==","shasum":"aa4eca5afc6cc5577edcf33c5dff46c38aec1c93","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.eefcf660.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoQINw/q3YQ6lHTsUPYsUAk/2hirdLP/7iPM99dNic/QIgEIjeChp25pPVkeeCIeFbjt7DDT1Iae2fSw32FYW7iy8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.eefcf660.0_1634765030580_0.03579832651216641"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.d21acc8f.0","@material/top-app-bar":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-Uim/ENJtNEr5mtqWdR9bBqTxG8Da3mJd8w49RIHgxrp42mJ7QkRX0Kh6IDf/eqS1F9Dl1Zaz+hIbTUWaz0rShA==","shasum":"c152be3f727769c07fdf1e75664095bd249c1656","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.d21acc8f.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDT7cRYE1DAgmGvZg1J1owYYP2AVsfeQQ5Cvf5DcQsQyQIgIU6MdMfgF09QHX2eluMV+4CL9Gy34Hwv8IiA2Sjomgc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.d21acc8f.0_1634769163920_0.24951235038580744"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"^0.25.3","@material/top-app-bar":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"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-fixed@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-hYirqEkjohb+7t3iCY0Zppl3fAXJUJNcvsj5VLDzjRKOnQo+f1i3p9AcpJw5sVV29S4oP+RT+qD7D7tD930uKQ==","shasum":"f37f9145ce851d0bbc0d61f6dd88cbd2db13a672","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.25.3.tgz","fileCount":9,"unpackedSize":25326,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDy39KkI6H8D4RmCowl0ACadOaMdqzMF2RmHEUxUlHqGAiA59iOgouYymayxpiB26F9XYEYanwoBM32I1cfEINV0NA=="}]},"_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-fixed_0.25.3_1634838944962_0.9367289704820949"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.60449b7b.0","@material/top-app-bar":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-sEFHf6cdrqW+Y0T1QeNgYdNRT/KfwMLVhmweNFl5XNzQHCW4VTYAL4RE6qv1iErmvF7K6wnEe7SDl9H394R4Ug==","shasum":"5e3dd7309480322174c52d920f059caf0195a8be","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.60449b7b.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDIpuR/NM9K/z/PL8HfYsAZYkGibzK4yN5SD7OaZs5AMAIhAMIhUXu+ig0elnjprP8tNT2jaov0xJfBw8xY0ZOHzPj1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.60449b7b.0_1634840264724_0.9807132601212691"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.0d8084ed.0","@material/top-app-bar":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-mgkdSCJCFIvtwERoTLJ8poAdW1w0e+JrfsniCSM2Furl9mlELqSuCI9GTuKVgywOVi565gZP0hvwfV1d1plvLQ==","shasum":"2d05120600bc3740411b536164ae53493337c160","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.0d8084ed.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeWrhgdK2214JHSyqsr8X0QKJeXhE5A2e7WVeFgh6k4QIgRezLVQm2jkCHivds0+6hrDXLL0UArX8lGf8qlQz722g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.0d8084ed.0_1635443109451_0.9307812664337423"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.232327ee.0","@material/top-app-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-KVyP+QFpI7GSMhyiAhB6xmP/cSOx8YXrcnFvFrshaNhi3snDIy4Ba4CpZx3muwa6jOmFy+EcvrXNrwXVDfTveg==","shasum":"686ea050f361539d87ba02d02ffbcbd23143cb5e","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.232327ee.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICj4KcvEFWP+/AM2dMSf96+GCcCmlCKa4+v/kkp+PijlAiB5ydbUo4Jq+9kpIMxiCLTG9U/MwmQCBdAwEAHj/E06JA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.232327ee.0_1635797761916_0.16738891674384115"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.0a492ae8.0","@material/top-app-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-UusDuRpFWxIvrdu9BRodJ/9BZdawcOunANkYwGrdstaSzmUdhmyZWggq95oi5OZe4Apf0uShVgGpdbyg7AFmyQ==","shasum":"0085e86e57c4189cf4d05514515df93bd7225973","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.0a492ae8.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDiBPc0wOz0cyZ9PhCtqG7v/Ydq7Sp6sL1EF5VwG0+gvAiA/O+BatTQtp7cHgxuZJCXaqFchl6DwtkkUciw9uWMX2w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.0a492ae8.0_1635847238691_0.613740553981234"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.0aa18745.0","@material/top-app-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-1FTeJ/FhGV9Q1Tr3YhyzLkXIooLdO1FV0zJ9DW8lAWNdsGxv5MeQmzPFM4pNA1TSya2NbR8q8yGegTGuk8us0A==","shasum":"e2c9312be3fc725b251fbafc9c4534b656a7d53c","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.0aa18745.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7Pepev2xTC3lPmmM7jVc0Ik/2BlRjjcWvIq7WoiN5ogIhAOjhg7JMFbC9X6TW0vOEwVAntd1tVfM2yL7RXsq6uvPT"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.0aa18745.0_1635876486510_0.7639229363344506"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.f3e28323.0","@material/top-app-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-QWYkMRamnyMi+XQkim2z1iReuGX/vzx8Ce3okR8u8LHkM6khzgNFo3zl8i4X/rwVMV+LrZjF2ovvKvfssz/atg==","shasum":"b1606bcb9557d574875a7cd22b9c2c9267927805","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.f3e28323.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEhCE15Ggvy4vx500LPmSU4Ux7tvz6ltWeTUvt3IEtnBAiBE3vF7UjPomp+WAh3INzL76bvn9Bu/eIX+tfQ2rLp4Ug=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.f3e28323.0_1635879588191_0.42770944282449674"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.27e05c5d.0","@material/top-app-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-GSCnREvXttkBqbeRKFnmykPEBJvKETi2wucSPdMde3ihBVVcgjNkrO6DeX/kjimpiAfqKoZYrEfqjvKDsVLNaQ==","shasum":"cce77dd264ae288ab9644f8665a8ddd6b99ad069","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.27e05c5d.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDQYlWbw/O+jQ3i3IERlUFslF5F2hGhvjcthXjV5Qvp1AiEAow+PhyAzF3AV0sI12514hFUnST978/B7rs3g0xM1JOA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.27e05c5d.0_1635965114272_0.24963114322721447"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.b9e44af7.0","@material/top-app-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-gjDjas9GrKW9Hdn2d6+V8p9fGU5iACW0pU9m74uguLOzZfo6io6XLg+VMBunop7383zLWwv+8xUU9EVjRomiDQ==","shasum":"a42794adc435ca5618b2ba285ba4ed2454ce7353","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.b9e44af7.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCDq9tYAiGZnlJUZw4dtxniJL/G9CvKZqIY0oVJ5oITXwIgQI65ozDgS2C/DHyGuLkRcZF/8KGDYAXXjsiCqhAMviI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.b9e44af7.0_1635966257541_0.4650896687762853"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.448f6cb9.0","@material/top-app-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-+f9NCN1vAS9io4dj/lXGCiVTVUnbM2KIRbPaQqShYXeK1P1UeRu/Sp7DJBvKsKvWrn8okY4+Eyl6jGeyXopA3A==","shasum":"837339076235c3c42609d4472ff992e44e1a7b03","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.448f6cb9.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmB2R1HlmWWKMaB1wq2OgGikNR5fkgWThV6ghfcJ6oCwIhAOR3919vkwczLCESh9aZDbzA/sH/8wVz0XMWSPfcKfXJ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.448f6cb9.0_1636049289089_0.3234602571485703"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.8067ce28.0","@material/top-app-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-CGkrGMSm7v7BT8/tnmEI/Rg8NWaLU4F4msqJyimGJgNsh5lXeKGkkWF1TsjZZJbTbfCVLavpxl9ODrqHBaQuGA==","shasum":"e6741b7793d9dc282e3884e9eb4fd1a55cc95ba6","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.8067ce28.0.tgz","fileCount":9,"unpackedSize":25361,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHDjAEAllBI5EGdJZNqxkQilDcw2m5eRAIscyGGzh7spAiEAoc0UnwbTzgKAW/c1IznD6GgKa+u9mr6XYPSH/8c2DKE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-top-app-bar-fixed_0.26.0-canary.8067ce28.0_1636064561624_0.34585089851014206"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.345c2bb9.0","@material/top-app-bar":"=14.0.0-canary.43d08ba77.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-2ciBOjBzIxb478gJdgctrT6E22PyxWhQrRboVw5DIjvkLRzF3PKYtL4LMGqKdw8K11roxVE5f1jxbb3isN63mg==","shasum":"44f4dcff10b7607de71ef3cd3262ec5ab285b254","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.345c2bb9.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP4JCRA9TVsSAnZWagAA/fsP/RX3fITuC5SMW1VNQPDN\nsvLhogZzeveXYziT2Ng5M6G/RZK0zwxVpDiTWZkQdm6GpYbRBlmweU20IgU8\nHAvTsrIwfkTmaeVCbtkLzIgk9hU4fS8Q2e59mZYKl9AVRTG9mt1hzllIRKHk\ne/gWNNXpfr/OyVuS+jFLmvRA4jq6YIJgMb1wiwx7tEP4sV+s0Ey6lE5Fne1H\nlyv0rSAMZcGDCZ1KXyBia8yFBTtI5pBI2xrAEBFvJzax5fQ7q698M8AX6UKY\nCoA5Kn5jaEd7ZzLodkJ766qbx9w39/0yvcEps4MkeNr+BzgqRqchjqYkC/q1\nPbeaJVJbGKGeKQEWnP+bUutqpnuCfY9wRd9qhULDTAvpOxjTQDHPK6z5lv0O\nWExY7AzvOKO8pbsHKnOlmVfsOYWNjzBbzi2LV+Jiy3k/YjVkShSkkBly0Aci\nlGpNzgVwuexFcPaoRc4mxfPhcY/u384s8GHyPRZgFGllfXrcPK8jc8oUOnhV\nasRknJQAJQ6+Jeu7cOenROEcBvmo+rgXjkZOrNboIHJQzxEFw1zdXWrhhmSh\nui8ATjoW//J66T0ca3pL3sGQnPId2te8iUUJ7aOQDYwmlgcqG7ba3X+EFGVK\nZSHKFD2xgq4lxtFPIENN4gPLQ4v5qp4aHkv0PN4w9M0EY2pnCEpL3mvprN/P\nQNUY\r\n=NwRB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGOr5ltvLADd4bgHQXppMhFOqXv+n8KWrcMC0olSAnRiAiEAmxe7Fi03X2xClK1vDSOOdewgli1+f9ozh2d6ZKLdQtM="}]},"_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-fixed_0.26.0-canary.345c2bb9.0_1638465033081_0.7401584511933539"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.0547aeeb.0","@material/top-app-bar":"=14.0.0-canary.17a072535.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-QkMPI+79dGkSEXtmr9iEuakCTGIcfDBKNsxE1x7xmkfgLxK0z3AIVrzuXiPSrmCZ8EkLgRMhSkjlZ7+RGZ6Row==","shasum":"142518ce7048e0b27cf83f858f09e0a040dcc05a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.0547aeeb.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjwTCRA9TVsSAnZWagAAyaYP/1DQQE7psRBe6q9Dt6Hb\nVgPXfu+MH84b+M5EVFB1NX1lX9eGjb3oYbSOoujY+awG5S3QSEIJ7ei5F9qv\ngVBIYnIgZaIFk1qE39hYbqMD7JUc6crUpP8QnU1NqY/+j5dXLgzdEafEwhkc\nh1767JZTLRRHpCrjoI82hdIYBT6+ZjuRwkdoBUk+Lq2Nk9BJNiJw/+qcGtYl\nCdNe+V4nLQMDFZK42K3bR3lemFDbTqBFplrJVGqVmR90ESxLv1hF0EJ2g5M1\nyE1U+Y0QiupJiLP/0O4B1YWWgeChNXrD4HHO509s1ixedrExqgd9T0auiFr+\nAsDkew0u/CRt4XAeUuoF/g8l+eEXX4HlLtbJRoDCRVcuA6sIQoVguIYo1k/1\npH9azAz6lHNK+fl7tSJc9LHc09Wtiq0Qv60f7fDhOBDJLE3viq7GjO6jMe2H\njz172ACj7l96RM3YsAj0Is0ZKfgN0WCcZpXiiyRTh+pkECW3xlLmw6CoSELi\nDSRHFUKCTogGiddqlHLTeoOeCex4jjA9BpCkJU4mh8SBLY/m23fD18ups3xj\nH/zfpYgYSEZfVcj24qaZeVXnmTQ2v7Ub1IrGDoI0JFmNrNt/Od2+0PaHrj4N\njFNMW0IngDDnDNow5SVw/K6c3s/gqJ7Til5pjS8TWkRs6a3TwN56P5V/jBuN\nNVKd\r\n=e6aq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjVqIjllu95+vEvHGgs+LpHfDRYzmosRzIFAc/8Le/aAIhAMoCadmGyIeh9Uy/D3QKtgXjDwA95j1RNRVNGzayaIDU"}]},"_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-fixed_0.26.0-canary.0547aeeb.0_1638808595163_0.7979908413557708"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.3b2452cc.0","@material/top-app-bar":"=14.0.0-canary.b6510c8c1.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-KujLSsR8xY6tQKIcimxJmir5t/1GM+Y4BPAX6ZKvSciuTAoM3ry7s6/RDADyKVYeV4iEGuZs8gL3iVGK9Zb/Ww==","shasum":"e6db14f207f216fc877a1a9e1550b22698dda775","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.3b2452cc.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUhqCRA9TVsSAnZWagAAdD4QAJ/2b/iAm/COxYL8mNeN\nKY7XtYc9xIBjN3iFhf8F7oJVfPYzppvTp9vyqQgBzDiv6Z5z5oBd59bCyYrA\n+536KyAfTdAb7xpr54ql8mJm1HoDnhRn75tN/ZIdiL47DbuHemEHcn/oLVNn\n21h0bAXUVRdSTiay57xmBG+AoTqsyv20ROPf+nqka8MO6rEsXfWdlre7BUR7\nE56lQXDhfGVsZ4ccTwu0CNrW71gmu1hac/OurMtLRiQxLzUqoxHq3y7KK6ZG\nMPKDZDLM/3KFWuQxNx8FaL2guOe5JhAnSYxRGGzN87cAVLpmgzy2sQzBqZFW\nT2sabUuWsw8kaUg25gLsnExKAeL0xjkpN2BvOccFRfImZhd3mEqqmAY0axmk\nwQBCzsTJwJI+K2DfYtdtdXS+G/p4rS1F1cQGvYPKCIprVJWCqiRLpprL8bgq\n/H8GbXl2dNNCXcwPiP/8tzlEsOCj0+vC9Z3fsX8oZ8slTCuK53ULrsoG+VX6\nr7DtikyhrwJ9MO7IGuDNdMCjnlbKeuQFyWHwLQBqB0mFC9q2HmW3p2Jmhfc8\n1UaSUMludoIDaajlPg12+jcDvGbSDFhOCtXR8xT5gq8CLw7yc//h6E5z9Ez2\noP948P14oFAhv3E6oKn27ud2godV4F1Uy6aF3ga/1gllQToRGFp8y2mDgxqE\nau5a\r\n=tyqc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQDaM1iPbS3gGPEkB3t5fCj7s1fcwkMCNUu2fhp7AWYjPAIfGoZ0EAoYyvh48KIjfSx6iLvXTYlOqlAGYhLbXxPBJw=="}]},"_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-fixed_0.26.0-canary.3b2452cc.0_1639008361941_0.23117265025086975"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.cf7ba5a9.0","@material/top-app-bar":"=14.0.0-canary.f460e23da.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-vUSFBnzq/LcDY+dRaTLWXloc+Kl3p+PpLnAuuVdPBQoZCqFeGeGanRcGiX/BR0Nd7zEog+K0by27jrPvu0VbUA==","shasum":"402a5d1f8c16113e588e32fc0dbd1149bfad9459","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6VoCRA9TVsSAnZWagAAZ8IP/jLzLizIE3bPxJv+S2xJ\noVrEKE/TJK2D86/JggYHdlE4a88zycLmDtObH+Os1ftUCQw9I+UZAToIWwoh\nRPvwW+NiMHuQeCbW+7oYfvR86qoblzLUzuDpE8ADWWBHOOyfMYXmQcaqditt\nwMtpJ2wilNTSfYrbzB79KMaSFS06I/q30R+jSWPE8vOxgxET2G6QtYAUAisF\nf//QvJhgjcY7OCOTqXxXSVeLE9xwTzOVBt1DtAzmwsB2vuvR2hMbHQF6QlXe\n4gXZd/Z8x6rxryJl8s6XzaKpQqSQE0y6lJGNSQZxCN7Kc8HMJXizDyYwlu6F\ngHQslaSsxC1yhp2554zpoPMH/9hyWySFfIRSz8MGjvXAjz4YTWg14tStW5Q5\nKYfjJ/CD78fIWwqhBc+UkauqJhjIloEQEp/ifSgWxypOXXDn7iwsQoH8HdmU\nPM5A+CaJ0jmmhPQ7S38IHsCGO/zANmzrX0Fc+TlI7IWcoZGvI+vvbjdVDOKW\nXiDOTFW0NaLAX3Oo5lpcogWLopHtfy0SSOj/8/pdc4pPzE/rS8vos/t2ySOO\nXBLpBQok8b9ntZKz+HGCmgunGrKcXpMLljOE1e3jGkWKi0Ka6GfPYy3R5U26\np6WQ/YlTKkYZM6Gi1Vx00fsO0PGjNch0B/p4ci91OF95Npren8EilwgCPKmk\nk2LW\r\n=aHh8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZ4bdEi7liaThQ6i9SMnP7X4oltBAfF0xkrxPv7+/X4wIgO1zXf39hEQxGLr4/3lK4hETRRnBA2zEZu676Xc/A2To="}]},"_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-fixed_0.26.0-canary.cf7ba5a9.0_1639163240203_0.4900512458459996"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.e1bcf14e.0","@material/top-app-bar":"=14.0.0-canary.3366a71d7.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-gt7aBDTtg42Co5mSMjs8w4qQrc8RD5cGC8O653iMPqaWCqWluU0ocwOrnq67ZfgMerweCITsDXUPxAUeFrOH9g==","shasum":"1d865a0a68a66ec7dabdc43cce9c8a5e6e17fc96","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.e1bcf14e.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3eGCRA9TVsSAnZWagAA9AIP/3dQkZTEK92OAymqyjb3\nDyIJzfQ+0Gve+pj7DCU5BymZfjDhXK20jCq6kd3fKQdignDlBqC4H830QNq/\nh47aWwg+kHrK4F/3wqgmhWLZ+l7JNVZdkvopx3EHfXwQHfo2xWZq3eNqd+eH\nPjKxcBtYD5bWELh2n7l59pdOKlyWt+TUGZ5nT67dJ8+SFXrCjU/B0tNBkuos\nqZ7oCZkJ/9fS+2gfHBgqaAy8/rYQIU+guoob4bim0x9NpOn02ufsbGSnsPi1\nuDohwu7Mh+d8leM3Y/DjkBWozcIHP2kcV4jvdfx7gND7pEy/1bqTvkganw9K\nIrckMPtdiJN2NxL6rPbMOnDJRFrLs3I4w4MU6rGZDFcVDRdxjw0MwY0cTqSz\nf4cKMlpCwkGdsvpDFbUn3x/vKjEmzxNVLejR11pYcxmxV17UcQdGfN0oQSJM\nf+TQYoESsADlEd/fpp4J5omgpCd9gL4i0HrWZuPY3wxTS4mWu8FCzJysqHPr\nqt/grThhY0QNtviRxeXE3wJ2XGDl+SmycT3Qe6ZkR+7+qF1603EWq0gpJ1iw\nMU2w/TBRVybFQpqgYPk275jODDgt9KKa1VsRG2tcRe+O0f80ds08SFhsQ67y\nGRDK++N5K+byrl4sR8qDD2bx4MMYEmqe5HfGq1kwetH8/eKUTm71JHNA15Um\nhbaB\r\n=G5ls\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDdCpKhaPH2T08yS1DU178cenCDbut5TKPOLhItjUsAZAiEA0c+OVWkyQfPpLM5XJNz7oLlCx0ao7T+aTa/fGYATa90="}]},"_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-fixed_0.26.0-canary.e1bcf14e.0_1640724358362_0.764734851203436"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.b9d35b69.0","@material/top-app-bar":"=14.0.0-canary.c047f7c19.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-Ud3nu6uCbgjE1BU7VB6ukN0UgZyXmAuho6Fjj3cYIDAixi4nv5k/AItcEPE2gmEeCdAnXPUzAiaRnOSGcoHTdw==","shasum":"99290cfb307ce2264c5b2daee4f5b182780d42cf","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.b9d35b69.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eMVCRA9TVsSAnZWagAARVYP/26SQbyo81ZQczE35hHe\nEHr0CBRGQlmt0zCCNViwIRXFHXOUiZ8d+OrJhkRjeSpxqYsRKyaH5DiDZ/Rj\nUZd+cPrMfxHXbIMyxLp5HpTgzlgK4XWIVxJO+QBcdF67WBFZYqgS42BVA9dJ\nHxX9kjWvDpkCVtDGXmcTIExiAnoU22uS+JnVEv9qsUei68/hUupJ7w6irbq8\nO5mmftNFs2WRqIGZTsfSLoTUhsY2Ww2W/D9vHG777LHCtwQWR3EllQqX+RR2\nujyS+fDpcP9BKNH7DJod1lkdHmIrnqrt5jNovDcsgcSkacEK2XYvVMjLuLGO\nLCYHraV595fwaFK/Qvy9XXbTNuC4wfK6cq+CKsQrgsmusx+9KsmtjLyExTPF\nlhyji5R3mrZdJMtO5FcLiJkgV2P4sCYF/y9KCeM3VlWA+UNCF3jvPFXgfSKs\n/cXHn/EigCn1pp2xzFiXM+NZjIRz91xFXgwXpHUKyBDrns/Jgqw+C78/3BJ1\nsssFlqUJEQfd8qnJrRNwUQLJQVlzGk7NdwItRNPICABHrgdnxKDHh2hWj723\niZN9Kc5ZJvncc75XXNzcegvRFv1e8aj0reLM+gpJ30BwEG58/QbSJ5+prppq\nEQjfOvx9+0nZQQQNEvbPFLQoEpEflzy7dGnqI9ALs3QSa91qNvRf0zHOTOSG\nXWKk\r\n=XSzW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDiSAzd6ZWFFWQ1QIp9Ha/NS8bBryJ80LJq0eMMH4X5agIhAO7yFxXObUbywBr+tw8Bd/YhKQKL/qafarS5RhtgH5ZE"}]},"_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-fixed_0.26.0-canary.b9d35b69.0_1641407253587_0.0689027718861781"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.2afff08e.0","@material/top-app-bar":"=14.0.0-canary.05db65ec0.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-KdZwzCcCd7ovzIVRSfnCS+IHa/UA1zHptTpKTKF5JsoDAzR6m+ZdEz9K3XrHRZRtTDM6miaWAURSwDuSVoc3eg==","shasum":"90457ede20f5960173d877f8c90cb2a3d0fa3129","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.2afff08e.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12vVCRA9TVsSAnZWagAA5pUP/ifSE6dT51AcEnf+SdN3\npXWq1RRs986fkTimWse1EKFHF0A2Ezbk7xXVeLbOC0yRWzgWeRqyV7ReVK7n\nj+swmPE0RRxyKIau2oUZOV3O7INkweQHG6CHmvAAK2+hi/0FyD2i1lSwa8x5\nK5NqGzG5ja7B1AbpXm/RgRNoBdjfvb73GXVW9xWY9Oqp1eOqhXJixXUfkDUs\nGbgcy3MXRa2Jfds47Kjt3LC5EQ28gbJRjbU0EjUppP55ZlfvZ5QrhmXEAkMu\ndxE6/3FEleEXx6fIQ4V8/4FiuQ8q+963ui5YYm5lyvHzAFCArlJ1YKdw7vD0\nyF9XvQgTt8iHHPm+yKyH0t9v8jqP6lurCWNCSPXzX6DyPMsCcWu2lBT3ghQv\nhTZ//yGirtvI0Q+UHQIRtozn+o09AbMH5mm5AdcxA4973e5eQUxHq/wu2Cv4\ntlwPlR8oVFusqa1d2UX95wQ+2oEZzMBvcIYsnC+ggsIerLiMQkNJvk8gMZzj\nCykTNpOj5rJCuG/G48grcTG+IrAx4AssjA9/VRO0uqEZjDwOWXg4MBcArk3l\nVwx62gY7dJTacrVOW027M3uD2470x5heF8A8f+XjeYr1dURDCS2uDP7F6cB6\nS1dBquvx5QIBeQeSSAn3KNcStjgQtT91wc9k+Wr283QNfejMMGwwnvxUoBJn\ngdOM\r\n=nZuW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5lkh+6pzo5hm4rEnrhZblh7RgKBju0F330d1Rm5ff7gIhAIDcKJag0XuZefJJ5JaMVtQeEFiGEA6SkMg1NXgkOegB"}]},"_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-fixed_0.26.0-canary.2afff08e.0_1641507797131_0.536956628242403"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.893fc857.0","@material/top-app-bar":"=14.0.0-canary.6ca8b8f85.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-P4Aw0GFthwqW2FdgnHJHUeeGorEZd6L0uW1RCxQVprPu7nHlYcJhD5gg95i1oFwh5Z0tfLCbPSNkktUMgPfUJQ==","shasum":"1c664e51727d4b7c08002d4b3d087f81d2ac9523","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.893fc857.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2IxYCRA9TVsSAnZWagAAVFUP/iee3DCaAIxbCOLBCJ0Q\nUq/YONozhkO4UZmZSQfls6dwBiYGN0qGYNye9881LjTaDhp2d7moRkr2r2nT\nKvlqH/RUJY53e+L2+uMRtNANfu4x86N+QQkc+AM3Py8GnPb13Vu9Ye5+ntRK\nDUWuXMMJ52/Ap17EkYVNkJ0P2J3Mk8m6Bm744AspttA5Kn2qZsP5srQ36MdE\n8LCrEdlm0idW4HmuCtu7zOJEfRRf2Hd0FN9SIaRNq8wexh5OeDGTPMTD+TQk\nRk8KTzvp6qpS77YDIInacIhka5S6Q1Up2VFbCyz+hbx+4LwPeuihU8SF+tSs\nyo3o0rLq7zwG0Nxva/9vIsd1sTMFIo+AyOHCODt3bC0bm2B+sENXMjq8E+9o\nQFlxP4DwrrFF9AdshijPm1FfaDU9tbCe0QxNMyKayflTYN3+xFu3RYL2acfj\nL7muOJVVBnSsZNzaY85bkUvppRXGLIxVaKMP+olHJMVxR5I0oTP4fPt+w1v3\n5FgSUDZxjCItzfuM9jloFxMlabSwRgfb/v7b5r4X+roYDH7nHqrH2CBgVBvi\nwv9p24GHXyRuuCmqDdX3tiyQM6qq6y0Kg/xb/KdIe/gek/mFFUOfu+hTdox+\nJzUfp5cbJahpx6ADZENka7TZmPJxT8VfcCrTv9eIa4N56idIyqUmrsHTrcI6\nixum\r\n=B+Bn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFLqLeYVSSWSSpHbNMAO4AqCpvWcJXlVNFUb2rkw8O8yAiEAzycNnIZZsLTisSLppoOGxUoOzuRM6A5otP/7i1nTWRg="}]},"_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-fixed_0.26.0-canary.893fc857.0_1641581656402_0.6427928639122269"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.69ba13b7.0","@material/top-app-bar":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-2mUm+sHpEFMuN0Pxn345MfPGmMUVznw6Pm5RPqGyK/X7KKtsdh3/tMcPb5ubDpwDxoJohcRASpp1dD3Rs6DPvg==","shasum":"774733521bf9e68005d33c059a26298cb67e745a","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.69ba13b7.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I+MCRA9TVsSAnZWagAAqMsP/jLzvsGZDEpoFvbzX0QZ\n+XS52ENrxkw2fUMqT7o/uvXLx5207XhLvqsQMZpvFS5WcfKufP6heJco9LGx\npJRXP4889dNbCvkpWF2ShyKSlD3nEhPSSsu2DUjSuNjHxYuNbMdGEfpCm0N7\n7+Ba7ZC53dTynNN4dgkwBub8NvwbvuF25m2QPFFi10/aJlWf9eWr5R48YNlp\neUSWVUGDBHJ4U+gO0urt7fqbQHldmBQDBDH2eHp/14QsYqlq7kjcSeE86kXb\nmeOgsfrTFGZagYP/pFJy1izL35ahRWAVvIZpCw2GWJTGJPxkQSyCHB6U7PH5\ni346Bn9s//0ccb7TShOnWKrV2zfbbS5/mdlIX7Plly7nGBA1V4VN9YSpuAQK\nGzC0SuMkVMZipHn7HQD8IpolXvDA46owU4sNF8o0vX7EvrW43zU2TwXrzeHf\n456WcVfYoVZio1Q2oOTQKyh+eIRdJzSRrrIfTFMSNzU710PXQr/AdIwuCpHY\n5bf8akT4xae0cxyDS8s224WtRtpvNkRzb5nIXkw58U+V5WviTeKSYCOv7aQ4\nxYtmCnzhxG3es9cDwGlRvOWiTVD++U0bJvs+GcUFdnQ5PQ5Gg31le+MC/ApX\nYH/r5B6v8EweTFmaf+LKa416c+LDY6BJCtNM2T+oDJzR0n4q5xr5tEn/T8yZ\nSSgR\r\n=c9pb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGuay/toR2v+r3kmRRHdEqzh3V+i6W45F42VR6CDfGntAiEAp4XB/IhkP9DJlg7yMDB8pk46OY7sEY1xOK3SJEiu9TQ="}]},"_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-fixed_0.26.0-canary.69ba13b7.0_1642631052396_0.9971609302390616"},"_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-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"0.26.0-canary.0af8ade5.0","@material/top-app-bar":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-top-app-bar-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\n\n## Additional references\n\n- [MDC Web: Top App Bar](https://material.io/develop/web/components/top-app-bar/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-top-app-bar-fixed@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-WWpjuhGwLjUT4lTSkBL4oMGdYozW21J8dDBxsnZtcjE8K1wjQmPVDmXjr29rEVrBiFUsDWah1sYFmkn794v8pQ==","shasum":"296abf8eee28f8e02a7f73ee4853d89eab67aa27","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0-canary.0af8ade5.0.tgz","fileCount":9,"unpackedSize":25361,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZeoCRA9TVsSAnZWagAAJOYP/iD1z1WN2apmmCjxWkB+\nwN5dhjDRyDbb7CdmedaOTjYfdyv/Vw6c7OR8YDh2dYatpTAWPft0Pjcntkxg\nkv24KX26qmMiyJTE+Nh4bzMks5bBXhssJ4EEzDbVbQij7mkQwaamnXQ+atlA\nOzg/cYNltGJQhl4VCcPEPbA3xtuGfes6CMTrF2+y/Z7x56iXLTb41ilLFzMf\ngZ4KSwp++aGwb+OJyp4I8/qmY/YbjHdrpJHCatdynk7G5tQp0jYB0GlbptyL\nDPppQA5+4W9Txc5Gh8eOkbemz/pulyx2xQSVGvqE0bLo3e5E2HBaDldmEiCc\n8zdXHrw7k9Pobx9MNvgoL1T2an6rirvidGE+qyHgVhh6o4SWnKK5HbMfcjfg\nFWpOby8PjSANHhipc3Vh4zWfgWQIhQJ3e6UbpRK4CzUkMKj+uCCFk74M7Dk2\ntcfvR7vpkh6J6zrgVmFOJHu2zzcn9W1JgEM1eWzgtIGcEhVAS6Vg92SB8kRC\nwic5Dy5PRJ/demgI19L2RENR/eFtakuyVHDhk5qb0MV7Tj+kGzbEErBw9mrZ\nYrHPJXcCIwHDDSa4KiYmQXKZqWB242PXQRNd2FxipH5LK+FL0gFJntEi4XBx\nhRXW4N/3t0xxJsWPGo7wBzetpekC2nZ51fm77HwmqliUCziggZZ1n8uJhGX8\n8OPe\r\n=HeUt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+pzfG81QGgGyNDmFPMHsAo1GWJ/3LBUvmWnFo0rMzpQIgVgiycjg3hJohoAGlaPhKaIBSTDzeHhVDwDrUBbY/EKk="}]},"_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-fixed_0.26.0-canary.0af8ade5.0_1644271528626_0.004129990528880079"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"^0.26.0","@material/top-app-bar":"=14.0.0","lit":"^2.0.0","tslib":"^2.0.1"},"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-fixed@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-HqjBrS2IbOI9Jw3xiKp/EzsMlEmuYjkpqhf/2NgQlgIJmjN5Hq0E7RK1nlNadvrOs3BP1WIppjGT8KNrbft14Q==","shasum":"909330f2563dc39b0f070256235023bc37936df3","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.0.tgz","fileCount":9,"unpackedSize":25301,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDQ2DEmPN+VKowZ2QkFpzyOKPtq7YU/Y9Y0zkeejTgzAIgCLkt+JgoTRAZAMjtjw5eCrmwAPH83YgLa6xVWb8bKy0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWa6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp8phAAlszVsczWdpDs2NRK+xUKKSIuvAvsw+cxthI1uhXYVFPIeBi+\r\n9THcilCcwnSHNc+5HxKnPRmmCuTRLxAxW5sd9S2LVIVjRt0STvHDyWw2bFe/\r\nrHPIlHNfetw+BVVnhnUydgHsallxIN0+aTCEum0gRzlZwPb3aS989gOCfMBu\r\nT2bSuCvkYPYDApy3svMEPCzdz9LuwMDfrbE8958Wy7WvLoFmtDBeFoM29+tv\r\npbfbKXb84iK87crLusAdBdmEvfD6U6299TuZXHbYDiQiUqn6Zv36uoCjn3P4\r\np9WNLQe2yZrhm41R6ghP00skt3/6WeGI5dy+QzEJt19T4ziisNbGUnt0DyS5\r\nNELTmUBOCyAGZM4WnSsPtAbB6V/L3qybuoLWPnfxQ8pHroubVbs3ronv7eb8\r\nJCsad5XK8evkZ4Sawv7FzTusbKKMDl+BT06qznU2EM9/imht2ycv+jhxS1/P\r\nswMkjTLmAV/lN9cF5MZ7Dfuhk95+Tmajii75nXQVh4viV8uUMSdYxpzNwuBb\r\nWyXzw6wExTvgqw0+KbCEBHw4FNV9FV55HCNVyc1YyGtGcN+OIk7ftcm9q603\r\njZR5UpMarRLWTXeIebodytyZRzNxE7fU+l/WKcw0AbmVkeGm7EYpB/hjuyIa\r\nEJzKv0MXL1/L+W3g4lQFiCcLqqY8e3Y1YMc=\r\n=41x1\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-fixed_0.26.0_1651599033827_0.6660124549562603"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"^0.26.1","@material/top-app-bar":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"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-fixed@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-Ja7nufBcUfgBLYc6nX+m02Yh6sVRjq2Xifx7la3g0VTC2FtJjtt9WmES79ptZSHzGOYMOtoyc+Zj84QZng8adg==","shasum":"49953691e64db9a98611f9d2d1a86384232aa301","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.26.1.tgz","fileCount":9,"unpackedSize":25365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAxIEvrKm6kt0q6kJ+WKT/LSLJW8JQbhpFemisJ2oqInAiBSa9fnZcjHo8Gx5kVw1dYvu/LrSyqrFC94u46W9+w16w=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXo4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2Hw//Qqw8sju0b80Hqhv/CwOKbA5EnrOl9SGii0czvy1UsIG7Wt1Y\r\nvGGLL066X4D5YRj0iMCFBMEk3YPMsGRpF1XYl/3acram7X81WxsSDViUkPWs\r\nV1hlt4iHBpOxKMwcRZdEykV7A7gftfBw82gTCB0BRhb/BqMFHYVRsDsX3QoM\r\nJmskE0pDemsGchhudWn28bbgX8gU2h0BebkdsfauD1s5EPcbjlDndDKr6ETP\r\nJk+VqIoqkwKGkXHa6L7adboKyc/C+7jAqLbfLuCJP/armOjKOR9em6lkGkHs\r\nj0aq7W/X1XyOQUBLrxqmDqsxdJ1Fv02kmhrqSZUjC5gD0/p08BAKRuFKra0r\r\n8WLt96STSdjBNFx9sGxJsbrk/O/hat48W0g3bMQljZau+wOK4sE1l+/P5cQc\r\n/DHP21pSCkezBVIbKEzIA0iqxIx0fCmXbxrkG/2B8f+VivaFFYnb/E0fpNtt\r\nKDxfUM+FZrdr/2bt6ElHXa6M1sLnLS/uW89+59lC0+Wd6Wq4GdWWoGzfiyXi\r\nvIRcK/ZV1Hs/aDGevvbb3+GbAboKsenfLs7zyzMs7RuYYC/9uydS3s2T34f2\r\nPJqHe1DUbRacezWKqb459PPrx3kGm04BNyQP266sdxvkbnDRUUfvXWHDVZT+\r\nFQzIhKSR3IQF9MJGdFLB7F5R4GscgYWaLKk=\r\n=uqiS\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-fixed_0.26.1_1652128312031_0.4244099032206452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-top-app-bar-fixed","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-fixed.js","module":"mwc-top-app-bar-fixed.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/top-app-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-top-app-bar":"^0.27.0","@material/top-app-bar":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"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-fixed@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-kU1RKmx8U7YCbsBuAXfNLtu+V/Jwos+o2mSY94tZpv36dIsvcsGQ4pB2zW0EaU8g9bQVdwLMVxj4oooxSmbZXw==","shasum":"efc4908141ccf3b9c1a9cfafe9a0c037599dee29","tarball":"https://registry.npmjs.org/@material/mwc-top-app-bar-fixed/-/mwc-top-app-bar-fixed-0.27.0.tgz","fileCount":9,"unpackedSize":25365,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6CIe/d0hoNqILeEDtatOBqiFYd6WfgM4fwx3AoiW6EwIgMzJh9fLAMd4mgNnYkY3QwJftiX/pTlkNd9QkcybWbeU="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqibRAAhUPl7obhFfyD47Bf+mzsBcpS+3Uir8W2nBa3AACC6qytTu+3\r\nWSmlGkCOBGLQYMMcnoe2WuWM5f7ABybzqHCQ+QzC8apvEyzhVbYa++aFV8F1\r\nYRzkn5X6qWjQbYfjrXsw6nZPo2bo6dnOLX9TiPlNW/wg8gXm1rV7ccyZ7DTv\r\ngrlouDPfR7u3PyQibbyZLfwA4zujWT3VlAoDDTso00OQW1PnvFxaNgPAdq9R\r\nqmbaGOdP1PNgPN036bwQRyPNcdt5lLsyJ8hCWt/cDDJe3qJTDM849ZrLxaN5\r\nfFSu2iCGhi4/F1Tdbs0zzcAu2G1iKCVvoTIWOyvo8+8zBhCZ7c+/qkJTKo9Z\r\nNiAWDZVwCDCj/siBUk4EtXsxxKmdwDMs8sEO/ghcotszb+/ql/LHYZdLFhKA\r\nhbyRYt+Gg3lNupzCMDuy2iv5X3SWPDEePaIBUwaAWr1PWAP2qfhAuWK9hWUf\r\nkV0IMyVcccugpyoXtfIrLsXqQqsXu41fM4w4S6at1kHo0VT9EEs9ULVj7Mn6\r\ncuqnFSV5YrzEF5jbDW7wYXAnfjTQPQAyy8pLCKxcIcgS5m4ketnbsSKFYT4t\r\n0m7aREXTebyOBZzUwO6CojnKY9Uz703+x7q8hofKOAwGkAEba/dGwmQ14ssW\r\nBFlqByeEZYbVeqgO6LoAeoLNb5Cuan1vNjA=\r\n=9hbM\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-fixed_0.27.0_1660331530721_0.47370464854624283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2019-08-27T21:23:54.894Z","0.7.0":"2019-08-27T21:23:55.289Z","modified":"2024-04-04T19:00:03.625Z","0.7.1":"2019-08-28T02:54:31.362Z","0.8.0":"2019-09-04T00:04:55.651Z","0.9.0":"2019-09-27T01:36:20.320Z","0.9.1":"2019-09-30T21:05:08.945Z","0.10.0":"2019-10-11T23:28:27.055Z","0.11.0":"2019-11-26T21:49:34.985Z","0.11.1":"2019-11-27T00:26:40.605Z","0.12.0":"2019-12-17T23:48:01.494Z","0.13.0":"2020-02-04T04:46:42.854Z","0.14.0-canary.f790f713.0":"2020-02-28T02:28:32.928Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:05:14.628Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:36.337Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:09:04.841Z","0.14.0-canary.960e214f.0":"2020-02-29T03:09:20.439Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:56:58.808Z","0.14.0-canary.024f371a.0":"2020-03-03T01:29:15.625Z","0.14.0-canary.2f164110.0":"2020-03-03T21:34:03.565Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:10:59.812Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:19:28.181Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:44:53.164Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:42.778Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:20:27.032Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:56:34.328Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T03:00:33.450Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:56:51.779Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:15:05.331Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:02:36.936Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:35:10.647Z","0.14.0-canary.55338c25.0":"2020-03-11T06:31:45.890Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:20:01.921Z","0.14.0-canary.b3211481.0":"2020-03-11T20:24:13.998Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:54:08.065Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:17:28.033Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:38.115Z","0.14.0-canary.306cabed.0":"2020-03-17T21:17:58.609Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:24:09.156Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:19:57.108Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:55:38.128Z","0.14.0-canary.134cf877.0":"2020-03-19T20:39:31.685Z","0.14.0":"2020-03-19T21:28:45.241Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:01:08.146Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:13:24.147Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:36:09.182Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:43.616Z","0.14.1":"2020-03-23T17:57:40.819Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:59:07.481Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:16:52.456Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:43:19.743Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:30:14.314Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:23:19.959Z","0.15.0-canary.1884603d.0":"2020-03-27T19:55:43.377Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:14:32.404Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:43.843Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:20:33.395Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:16:21.397Z","0.15.0-canary.072084ab.0":"2020-04-01T18:40:09.372Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:29:56.829Z","0.15.0-canary.9b676354.0":"2020-04-03T20:30:21.135Z","0.15.0-canary.6b946095.0":"2020-04-03T21:24:25.366Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:29:57.795Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:09:07.548Z","0.15.0-canary.8d352305.0":"2020-04-07T21:42:17.938Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:57:39.089Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:32:47.876Z","0.15.0-canary.25099f79.0":"2020-04-08T21:30:54.115Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:16:47.057Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:25:23.395Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:03:04.231Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:45:51.904Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:38:57.655Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:04:37.873Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:41:15.624Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:57:22.042Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:01:43.331Z","0.15.0-canary.bade5580.0":"2020-04-17T23:19:31.520Z","0.15.0-canary.dae38247.0":"2020-04-18T00:16:24.445Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:34:32.849Z","0.15.0-canary.715decfe.0":"2020-04-20T18:35:38.724Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:34:24.633Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:42.158Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:51:32.936Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:38:27.185Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:12:32.315Z","0.15.0-canary.953015d6.0":"2020-04-21T21:35:52.563Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:59:13.440Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:37:56.946Z","0.15.0-canary.58d51135.0":"2020-04-23T00:45:07.970Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:10:14.769Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:41:16.581Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:43:15.711Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:44:33.986Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:14:35.706Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:18:53.932Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:42:59.495Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:12:56.876Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:56:00.780Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:18:17.777Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:27:25.623Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:13:45.302Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:27:35.436Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:15:01.471Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:45:21.402Z","0.15.0-canary.457bf035.0":"2020-05-01T20:51:07.471Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:25:48.114Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:36:26.262Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:33:56.146Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:16:45.951Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:45:09.805Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:32:25.004Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:12:24.655Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:14:01.711Z","0.15.0":"2020-05-05T22:36:13.753Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:04:43.628Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:15:01.087Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:41:28.908Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:17:45.731Z","0.16.0-canary.588062d7.0":"2020-05-08T21:24:03.572Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:30:21.064Z","0.16.0-canary.2772c509.0":"2020-05-11T18:36:56.666Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:05:39.369Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:20:03.561Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:18:30.834Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:37:12.870Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:34:30.273Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:19:45.485Z","0.16.0-canary.3270effb.0":"2020-05-13T21:24:55.169Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:52:25.226Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:36:34.451Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:25:23.613Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:50:07.718Z","0.16.0-canary.91f63179.0":"2020-05-16T00:34:43.909Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:31:54.944Z","0.16.0-canary.a564b194.0":"2020-05-18T23:03:50.669Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:48:10.175Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:24:35.747Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:38:39.367Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:39:08.685Z","0.16.0-canary.421a6856.0":"2020-05-20T05:24:29.225Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:31:09.582Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:40:40.142Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:33:32.364Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:07:53.234Z","0.16.0-canary.17d33745.0":"2020-05-26T16:14:08.143Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:43:02.605Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:44:22.172Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:30:33.686Z","0.16.0-canary.43bde144.0":"2020-05-27T18:29:29.766Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:03:26.830Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:36:43.886Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:15:14.736Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:18:52.343Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:49:25.237Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:36:56.632Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:50:02.239Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:44.064Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:29:04.436Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:57:32.875Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:15:54.349Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:46:05.188Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:21:14.735Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:37.777Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:05:09.120Z","0.16.0-canary.51552859.0":"2020-06-10T00:08:23.645Z","0.16.0-canary.2e269285.0":"2020-06-10T01:35:56.666Z","0.16.0-canary.be138b01.0":"2020-06-10T20:49:26.121Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:59:00.608Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:58:03.544Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:08:52.390Z","0.16.0-canary.58b73343.0":"2020-06-16T21:23:54.526Z","0.16.0-canary.f155c058.0":"2020-06-18T18:08:04.318Z","0.16.0-canary.309779d2.0":"2020-06-18T23:58:53.513Z","0.16.0-canary.e7649968.0":"2020-06-19T21:40:56.990Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:37:55.360Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:13:00.143Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:15:17.208Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:39:30.270Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:54:35.612Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:19:11.376Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:05:27.529Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:36:37.834Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:30:18.209Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:38:28.514Z","0.16.0-canary.a3384d2d.0":"2020-06-30T21:00:40.008Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:10:02.784Z","0.16.1":"2020-06-30T21:14:56.848Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:44:24.331Z","0.17.0":"2020-07-01T19:44:35.877Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:44:56.945Z","0.18.0-canary.fd970958.0":"2020-07-01T23:33:41.614Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:48:46.997Z","0.17.2":"2020-07-02T05:58:27.870Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:59:36.837Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:32:51.829Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:23:31.409Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:32:43.572Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:37:53.593Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:26:00.338Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:43:43.447Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:48:34.649Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:37:38.029Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:53:20.460Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:33:03.584Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:44:49.777Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:42:13.370Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:23:39.788Z","0.18.0-canary.44966b65.0":"2020-07-15T18:05:15.818Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:54:59.456Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:46:18.248Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:46:52.824Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:41:05.923Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:44:13.204Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:57:47.558Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:40:09.514Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:42:10.616Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:01:00.598Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:02:56.192Z","0.18.0-canary.346a622a.0":"2020-07-22T23:40:13.788Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:10:39.285Z","0.18.0-canary.718c385c.0":"2020-07-23T20:06:43.846Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:11:08.147Z","0.18.0-canary.1f082191.0":"2020-07-24T19:16:26.781Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:21:34.347Z","0.18.0-canary.94987b64.0":"2020-07-24T20:26:47.751Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:05:05.647Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:15:26.837Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:42:42.408Z","0.18.0-canary.99df7397.0":"2020-07-29T02:40:50.800Z","0.18.0-canary.45493e05.0":"2020-07-29T17:16:55.746Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:21:48.112Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:55:07.249Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:43:31.260Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:04:30.771Z","0.18.0-canary.887c2848.0":"2020-07-30T22:05:51.825Z","0.18.0-canary.354eb695.0":"2020-07-30T23:58:07.464Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:40:50.328Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:11:21.677Z","0.18.0-canary.779853ff.0":"2020-08-03T17:23:46.430Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:41:03.265Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:01:24.467Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:47:01.877Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:50:54.059Z","0.18.0-canary.21c55569.0":"2020-08-03T19:56:56.580Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:22:40.623Z","0.18.0":"2020-08-03T21:24:30.382Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:07:09.176Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:18:25.855Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:30:07.517Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:46:14.314Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:13:43.128Z","0.19.0-canary.b6106add.0":"2020-08-05T20:49:41.207Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:19:04.874Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:27:43.452Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:44:06.386Z","0.19.0-canary.96d15938.0":"2020-08-07T20:29:15.723Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:08:45.730Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:27:41.329Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:07:16.007Z","0.19.0-canary.1583e263.0":"2020-08-11T23:11:01.831Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:25:28.016Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:27:43.200Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:14:49.303Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:17:35.621Z","0.19.0-canary.758635ed.0":"2020-08-14T17:17:02.252Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:08:21.009Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:15:53.997Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:02:56.561Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:09:18.977Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:16:56.568Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:16:27.214Z","0.19.0-canary.5962b365.0":"2020-08-19T20:29:24.005Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:56:10.396Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:35:18.558Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:34:15.257Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:52:45.309Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:16:31.635Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:23:54.111Z","0.19.0-canary.f208201e.0":"2020-08-24T19:03:30.627Z","0.19.0-canary.14a172db.0":"2020-08-25T19:48:13.098Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:37:24.691Z","0.19.0-canary.34012082.0":"2020-08-27T19:48:43.219Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:12:28.478Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:27:24.777Z","0.19.0-canary.697e3879.0":"2020-09-02T00:13:35.549Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:18:37.903Z","0.19.0-canary.606642ec.0":"2020-09-02T21:35:59.572Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:53:25.207Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:11:36.944Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:57:55.302Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:31:53.347Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:57:10.633Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:07:55.119Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:41:26.163Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:36:33.469Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:26:41.033Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:27:35.658Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:31:52.545Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:34:34.612Z","0.19.0-canary.3babab12.0":"2020-09-11T02:37:34.400Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:49:40.337Z","0.19.0-canary.a9177836.0":"2020-09-11T17:47:49.352Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:13:40.327Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:06:04.242Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:25:13.493Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:49:41.902Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:38:18.492Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:26:54.018Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:09:01.887Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:04:52.383Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:26:08.408Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:04:28.716Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:21:49.421Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:07:40.648Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:12:53.625Z","0.19.0-canary.347110f1.0":"2020-09-28T16:50:42.552Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:01:32.887Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:38:34.039Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:23:24.608Z","0.19.0-canary.615d861d.0":"2020-10-02T01:33:45.399Z","0.19.0-canary.af110e86.0":"2020-10-02T23:50:16.402Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:27:24.343Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:14:40.788Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:08:04.405Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:30:50.423Z","0.19.0":"2020-10-07T22:33:29.548Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:54:02.304Z","0.19.1":"2020-10-08T23:06:01.584Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:07:35.564Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:34:37.325Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:22:34.826Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:46:40.169Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:16:10.778Z","0.20.0-canary.3280b686.0":"2020-10-16T00:04:52.524Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:14:47.171Z","0.20.0-canary.4773c773.0":"2020-10-16T22:34:33.684Z","0.20.0-canary.65787913.0":"2020-10-19T18:51:24.675Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:24:40.841Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:24:15.242Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:21:22.156Z","0.20.0-canary.32961593.0":"2020-10-28T00:39:34.680Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:37:22.148Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:50:59.359Z","0.20.0-canary.124beb49.0":"2020-10-31T00:06:54.787Z","0.20.0-canary.5937f468.0":"2020-11-04T21:06:15.546Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:31:10.118Z","0.20.0-canary.184861ee.0":"2020-11-07T00:38:04.328Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:06:15.289Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:58:19.951Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:24:26.156Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:42:22.774Z","0.20.0-canary.2c553352.0":"2020-11-12T22:43:04.508Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:48:47.070Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:24:25.259Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:26:36.108Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:12:10.760Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:52:33.593Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:17:03.479Z","0.20.0-canary.761027ff.0":"2020-11-18T22:14:31.129Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:20:13.922Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:30:57.896Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:10:49.138Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:25:05.343Z","0.20.0-canary.72092360.0":"2020-11-24T04:18:31.395Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:48:43.057Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:05:38.403Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:27:35.151Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:56:12.285Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:16:49.303Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:07:37.627Z","0.20.0-canary.9755be10.0":"2020-12-03T19:25:39.998Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:50:09.386Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:26:23.747Z","0.20.0":"2020-12-03T22:28:55.357Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:57:10.485Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:04:23.904Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:54:18.949Z","0.21.0-canary.635c7996.0":"2020-12-17T23:32:10.823Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:49:13.181Z","0.21.0-canary.41f77000.0":"2020-12-18T00:35:34.530Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:40:06.089Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:02:58.184Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:49:55.276Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:54:39.625Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:08:31.038Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:04:23.242Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:45:51.166Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:55:19.736Z","0.21.0-canary.269eed01.0":"2021-01-13T21:45:35.388Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:07:30.414Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:04:50.451Z","0.21.0-canary.bc113605.0":"2021-01-14T00:45:43.849Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:09:37.565Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:07:45.173Z","0.21.0-canary.2899691d.0":"2021-01-16T01:44:55.863Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:21:42.848Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:52:40.881Z","0.21.0-canary.597ca1b6.0":"2021-01-20T01:00:17.572Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:01:48.767Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:38:02.145Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:36:55.996Z","0.21.0-canary.664a2927.0":"2021-01-21T19:18:51.331Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:47:52.869Z","0.21.0-canary.027365eb.0":"2021-01-22T21:07:49.819Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:26:52.968Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:33:05.963Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:52:13.059Z","0.21.0-canary.c8797192.0":"2021-01-23T00:07:34.048Z","0.21.0-canary.946f5563.0":"2021-01-23T00:43:51.253Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:40:27.306Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:06:36.550Z","0.21.0-canary.14e01610.0":"2021-01-27T19:51:47.803Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:17:28.561Z","0.21.0-canary.5a328336.0":"2021-01-28T19:55:02.419Z","0.21.0-canary.533b1251.0":"2021-01-29T15:12:03.873Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:17:45.642Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:04:09.262Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:34:23.645Z","0.21.0-canary.5160e548.0":"2021-02-05T23:51:35.763Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:19:07.821Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:51:25.168Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:45:27.935Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:29:19.686Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:43:28.685Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:48:42.881Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:25:12.346Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:18:25.854Z","0.21.0-canary.d84df029.0":"2021-02-16T19:08:38.732Z","0.21.0-canary.c525f471.0":"2021-02-17T20:53:52.677Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:14:17.014Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:38:29.830Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:02:37.417Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:19:45.742Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:15:29.494Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:10:38.706Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:01:30.148Z","0.21.0-canary.12574572.0":"2021-03-02T20:29:48.181Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:35:03.916Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:48:14.955Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:11:31.654Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:52:01.730Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:22:42.469Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:27:27.929Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:23:54.632Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:25:01.293Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:27:50.237Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:41:32.798Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:51:54.867Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:01:18.446Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:52:04.633Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:37:38.531Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:24:04.263Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:47:03.731Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:29:50.271Z","0.21.0-canary.0138863c.0":"2021-03-11T18:37:14.876Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:19:07.078Z","0.21.0-canary.520290a9.0":"2021-03-11T22:28:21.499Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:32:48.378Z","0.21.0-canary.4246c082.0":"2021-03-11T22:39:43.860Z","0.21.0-canary.2d736253.0":"2021-03-15T22:36:13.244Z","0.21.0-canary.7033124d.0":"2021-03-16T18:38:00.425Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:39:27.270Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:05:08.539Z","0.21.0-canary.572107b5.0":"2021-03-18T23:54:40.947Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:20:27.067Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:30:21.246Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:21:42.006Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:41:15.986Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:08:52.383Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:11:45.323Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:48:09.323Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:48:38.574Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:14:58.071Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:42:31.062Z","0.21.0-canary.852f873c.0":"2021-04-02T05:22:34.348Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:44:44.373Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:50:23.401Z","0.21.0-canary.583644a6.0":"2021-04-05T17:51:27.147Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:36:56.140Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:43:08.694Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:24:14.064Z","0.21.0-canary.e539904c.0":"2021-04-08T18:02:21.122Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:11:56.774Z","0.21.0-canary.e142c144.0":"2021-04-12T14:51:00.503Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:05:50.658Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:39:29.029Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:42:15.712Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:26:37.710Z","0.21.0-canary.ff79b092.0":"2021-04-15T19:00:18.982Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:10:41.235Z","0.21.0-canary.11977cac.0":"2021-04-16T00:58:21.845Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:51:21.821Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:46:55.809Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:53:29.512Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:09:49.288Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:19:38.006Z","0.21.0-canary.0875e898.0":"2021-04-30T21:27:48.051Z","0.21.0":"2021-04-30T23:58:11.385Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:05:34.707Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:34:32.801Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:33:57.281Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:10:59.736Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:37:14.810Z","0.22.0-canary.5813480a.0":"2021-05-05T18:25:44.247Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T17:59:44.967Z","0.22.0-canary.25693d60.0":"2021-05-07T21:56:17.418Z","0.22.0-canary.c497962b.0":"2021-05-07T22:20:10.952Z","0.22.0-canary.e300688e.0":"2021-05-07T22:24:39.353Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:29:35.208Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:34:52.087Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:34:54.811Z","0.22.0-canary.004aca62.0":"2021-05-11T18:06:38.246Z","0.22.0-canary.4af17446.0":"2021-05-11T18:46:26.547Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:51:57.622Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:00:54.775Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:17:41.542Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:03:41.510Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:09:31.474Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:58:41.473Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:50:14.186Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:58:46.588Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:32:21.639Z","0.22.0-canary.2212691a.0":"2021-05-17T23:52:58.337Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:22:51.921Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:21:17.836Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:40:32.972Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:51:20.662Z","0.22.0-canary.b401a081.0":"2021-05-21T23:23:22.467Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:16:45.674Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:03:07.530Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:02:38.825Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:12:39.657Z","0.22.0-canary.b9b0e330.0":"2021-05-25T21:00:45.273Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:05:49.709Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:14:23.282Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:13:41.572Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:31:27.076Z","0.22.0-canary.227a4614.0":"2021-05-27T16:03:37.745Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:45:39.445Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:33:24.124Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:55:28.166Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:45:50.303Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:50:28.777Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:37:00.099Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:49:20.563Z","0.22.0-canary.e1511867.0":"2021-06-12T00:57:38.806Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:52:13.401Z","0.22.0-canary.573d8913.0":"2021-06-18T23:27:03.807Z","0.22.0-canary.21dba001.0":"2021-06-21T21:40:54.883Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:56:22.567Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:09:28.446Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:47:21.340Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:17:34.911Z","0.22.0-canary.73122cba.0":"2021-06-30T19:37:06.870Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:34:22.657Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:32:41.527Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:46:43.333Z","0.22.0-canary.d53edeb6.0":"2021-07-07T17:00:36.416Z","0.22.0-canary.2226489a.0":"2021-07-08T18:01:50.826Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:03:05.568Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:17:10.461Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:37:54.913Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:42:24.727Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:18:57.973Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:27:00.300Z","0.22.1":"2021-07-14T22:52:53.246Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:54:25.726Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:39:52.736Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:04:03.968Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:22:57.115Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:04:22.696Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:09:12.204Z","0.23.0-canary.c180db74.0":"2021-07-16T17:25:19.753Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:57:33.171Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:08:05.746Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:12:26.235Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:06:55.010Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:54:24.104Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:08:02.730Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:51:04.294Z","0.23.0-canary.104debd5.0":"2021-07-19T22:53:55.536Z","0.23.0-canary.4612705d.0":"2021-07-20T16:04:58.359Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:34:56.541Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:53:16.423Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:53:12.023Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:16:24.106Z","0.23.0-canary.e0693475.0":"2021-07-23T18:56:33.776Z","0.23.0-canary.d595e030.0":"2021-07-23T20:53:33.687Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:57:07.476Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:25:17.013Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:44:25.817Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:53:28.062Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:22:57.674Z","0.23.0-canary.ab310900.0":"2021-07-28T20:21:43.908Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:26:31.665Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:32:15.465Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:14:08.431Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:48:07.543Z","0.23.0-canary.21918905.0":"2021-08-03T21:14:49.830Z","0.23.0-canary.193c87be.0":"2021-08-04T18:08:03.534Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:11:15.282Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:47:51.347Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:49:13.316Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:10:54.806Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:04:15.476Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:47:20.725Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:22:00.546Z","0.23.0-canary.3f47ae57.0":"2021-08-12T18:00:24.427Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:24:36.377Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:17:21.687Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:38:49.202Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:23:41.230Z","0.23.0-canary.dbb8b366.0":"2021-08-19T23:00:43.703Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:02:35.926Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:27:44.820Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:56:51.781Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:21:52.780Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:26:38.840Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:43:01.627Z","0.23.0-canary.6db58716.0":"2021-08-23T09:08:27.900Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:50:44.856Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:50:17.133Z","0.23.0-canary.756208fb.0":"2021-08-25T19:51:10.955Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:44:21.794Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:26:37.495Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:45:16.267Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:08:06.864Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:29:24.677Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:29:09.762Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:31:56.838Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:19:23.095Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:25:53.031Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:27:05.718Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:16:34.204Z","0.23.0-canary.4962a163.0":"2021-09-07T23:53:47.382Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:13:59.726Z","0.23.0-canary.76c68381.0":"2021-09-08T20:14:10.863Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:26:43.988Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:33:21.486Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:21:06.589Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:26:45.095Z","0.23.0":"2021-09-13T21:35:53.917Z","0.24.0-canary.9830d665.0":"2021-09-13T21:37:30.392Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:32:34.840Z","0.24.0-canary.583613a9.0":"2021-09-14T16:55:40.299Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:32:42.254Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:36:16.231Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:13:35.785Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:45:14.491Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:08:58.026Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:32:39.166Z","0.24.0-canary.a7132082.0":"2021-09-15T21:46:10.917Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:45:59.327Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:39:21.224Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:09:00.347Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:52:23.562Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:55:09.167Z","0.24.0-canary.569d739f.0":"2021-09-20T21:24:08.192Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:01:04.059Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:12:24.899Z","0.25.1":"2021-09-21T03:12:46.707Z","0.26.0-canary.ae060177.0":"2021-09-21T14:38:22.882Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:32.442Z","0.26.0-canary.07e91417.0":"2021-09-22T21:06:02.359Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:27:52.168Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:31:22.839Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:36.466Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:45.248Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:51:04.897Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:06:04.637Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:34:07.871Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:08:30.716Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:33:48.184Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:57:28.320Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:34.820Z","0.25.2":"2021-10-11T23:18:33.504Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:43.039Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:37:13.334Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:23:50.693Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:44.022Z","0.25.3":"2021-10-21T17:55:45.132Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:17:44.944Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:45:09.635Z","0.26.0-canary.232327ee.0":"2021-11-01T20:16:02.167Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:38.842Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:08:06.665Z","0.26.0-canary.f3e28323.0":"2021-11-02T18:59:48.361Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:45:14.639Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:04:17.694Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:08:09.231Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:41.782Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:10:33.241Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:36:35.312Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:06:02.125Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:07:20.362Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:45:58.516Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:27:33.790Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:23:17.503Z","0.26.0-canary.893fc857.0":"2022-01-07T18:54:16.599Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:24:12.568Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:05:28.747Z","0.26.0":"2022-05-03T17:30:33.994Z","0.26.1":"2022-05-09T20:31:52.284Z","0.27.0":"2022-08-12T19:12:10.962Z"},"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-fixed.svg)](https://www.npmjs.com/package/@material/mwc-top-app-bar-fixed)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nFixed Top App Bars are a container for items such as application title, navigation icon, and action items that are always visible.\n\n![](https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/top-app-bar-fixed/images/fixed.gif)\n\nFor a version of this component that scrolls, see [``](https://github.com/material-components/material-web/tree/master/packages/top-app-bar)\n\n[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-fixed/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-top-app-bar-fixed\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example Usage\n\n### Standard\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Center Title\n\n\n\n```html\n\n \n
Title
\n \n
\n\n```\n\n### Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Prominent and Dense\n\n\n\n```html\n\n \n
Title
\n \n \n \n
\n\n```\n\n### Customize Colors\n\n\n\n```css\nmwc-top-app-bar-fixed {\n --mdc-theme-primary: orange;\n --mdc-theme-on-primary: black;\n}\n```\n\n## API\n\n### Slots\n| Name | Description\n| ---- | -----------\n| `actionItems` | A number of `` elements to use for action 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-fixed-box-shadow` | mdc elevation 4 | Sets the box shadow of the fixed top app bar when scrolling.\n| `--mdc-top-app-bar-width` | `100%` | Width of the `top-app-bar` in relation to the Window.\n\n#### Elevation values\n\n| Elevation Level | CSS Value\n| --- | ---\n| `4` | `0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12)`\n\n#### Global Custom Properties\n\nThis component exposes the following global [theming](https://github.com/material-components/material-components-web-components/blob/master/docs/theming.md)\ncustom properties.\n\n| Name | Default | Description\n| ---- | ------- | -----------\n| `--mdc-theme-primary` | Background color of the bar.\n| `--mdc-theme-on-primary` | Text color of the title, and icon colors.\n| `--mdc-typography-headline6-` | Styles the typography of the top-app-bar title.\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"]}